노마드코더 AI 기초 탄탄 클럽 #18 React Calculator

노마드코더에서 수강 가능한 풀스택 웹 기초를 6주만에 훑는 챌린지. 해당 강의: ReactJS로 영화 웹 서비스 만들기 #18은 React(JS)로 Calculator를 만드는 것.

---

챌린지 조건

• React.useState()와 onChange를 활용하여 계산기를 만드세요.
• 블루프린트에 React와 CSS, 기본 UI가 이미 준비되어 있습니다.
• App.jsx 파일의 TODO 주석 위치에 코드를 작성하세요.
• 두 숫자와 연산자를 입력받아 사칙연산(+, -, *, /)의 결과를 화면에 표시하세요.

---

State (상태)

• 일반 자바스크립트 변수(let, const)와 달리, 값이 변할 때마다 React가 화면을 자동으로 업데이트(재렌더링) 해주는 특별한 저장소.
• 선언 방법: const [값, 값을바꿀함수] = React.useState(초기값);
  • 값: 화면에 보여주거나 계산에 사용할 현재 상태.
  • 값을바꿀함수: 오직 이 리모컨 함수를 통해서만 값을 변경해야 React가 변화를 감지한다. 따라서 값 = 새로운 값 처럼 직접 덮어쓰면 안 된다.

const [num1, setNum1] = React.useState(0);
const [num2, setNum2] = React.useState(0);
const [operation, setOperation] = React.useState('0');
const [resultNum, setResult] = React.useState(0);

---

제어 컴포넌트 (Controlled Component)

• 사용자가 입력하는 <input>이나 <select>의 값을 React가 완벽하게 통제하는 방식.
• value와 onChange를 반드시 연결해야 한다.
  1. value={state이름}: 화면에 보여줄 값을 React State로 고정.
  2. onChange={(e) => 상태변경함수(e.target.value)}: 사용자가 입력할 때마다 이벤트 객체(e)를 통해 State를 업데이트.

<select
	id="operation"
	value={operation}
	onChange={(e) => {
	  setOperation(e.target.value);
	}}
>	
	<option value="0">👉🏻 Select operation</option>
	<option value="+">+</option>
	<option value="-">-</option>
	<option value="/">/</option>
	<option value="*">*</option>
</select>

---

JSX에서 자바스크립트 사용하기

• HTML처럼 생긴 JSX 안에서 변수나 State 값을 화면에 출력하려면 중괄호 {}로 감싸주어야 한다.
  • <h2>결과: {resultNum}</h2>

---

이벤트 핸들링 (버튼 클릭)

• <button>을 클릭했을 때 특정 함수를 실행하려면 onClick 속성에 함수를 연결한다.
  • <button onClick={calculate}>Calculate</button>
• HTML 폼에서 입력받은 e.target.value는 기본적으로 문자열(String)로 취급되므로, 수학적 계산을 하기 전에는 Number()를 사용해 숫자로 변환해주어야 문자열이 이어붙는 사고(1+2="12")를 막을 수 있다.
  • calculatedValue = Number(num1) + Number(num2);

---

파생 상태 (Derived State)

• 버튼의 disabled 여부처럼 기존의 State들을 조합해서 알 수 있는 값은 새로운 useState를 만들지 않는다.
• 컴포넌트 안이나 요소의 속성(예: disabled={조건식})에 직접 연산 로직을 적어주면, React가 렌더링될 때마다 실시간으로 조건을 평가하여 적용한다.

      <button
        onClick={calculate}
        disabled={
          num1 === '' || 
          num2 === '' ||
          (operation === '/' && num2 === '0')
        }
      >

---

자바스크립트 switch 문의 특징 (Fall-through)

• C, C++, Java, JavaScript 등에서의 switch 문은 일치하는 case를 찾으면 그 아래의 모든 코드를 실행해 버린다. 따라서 각 case가 끝나는 지점에 반드시 break;를 적어주어야 스위치 문을 빠져나갈 수 있다.
  • 이유: case가 똑같은 동작을 해야할 때 코드를 줄일 수 있기 때문.
• Python, Kotlin, Swift, Rust, Go 등의 언어에서는 break;를 쓰지 않아도 하나의 case가 끝나면 자동으로 멈춘다. Fall-throught를 하고 싶을 때는 계속 진행하라고 명시해야한다.

switch (operation) {
  case '+':
	calculatedValue = Number(num1) + Number(num2);
	break;
  case '-':
	calculatedValue = Number(num1) - Number(num2);
	break;
  case '/':
	calculatedValue = Number(num1) / Number(num2);
	break;
  case '*':
	calculatedValue = Number(num1) * Number(num2);
	break;
}

---

Series: 노마드코더 - AI 기초 탄탄 클럽