Props

props는 부모 컴포넌트가 자식 컴포넌트에 주는 값

State

컴포넌트 내부에서 가지고 있는, 변화하는 상태값
state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값

• 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
• 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

=> props나 state가 변하면 화면이 다시 그려짐

State hook, useState

React에서는 state를 다루는 방법 중 하나로 state 변수는 React에 의해 함수가 끝나도 사라지지 않음

useState 사용법

• useState 불러오기

  import { useState } from "react";
  

• useState를 컴포넌트 안에서 호출

  function CheckboxExample() {
  // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라 부르겠습니다.
    const [isChecked, setIsChecked] = useState(false);
  }

  React의 useState 훅을 사용하여 isChecked라는 상태 변수를 선언하고, 초기값을 false로 설정

  이 코드는 함수 컴포넌트 내에서 상태를 관리하기 위해 사용됨. useState 훅은 배열을 반환하며, 배열의 첫 번째 요소는 상태 변수(isChecked), 두 번째 요소는 해당 상태를 업데이트하는 함수(setIsChecked)

  초기값을 false로 설정한 이유는 isChecked 상태 변수가 처음에는 체크되지 않은 상태를 나타내기 위해서다. 이후에 setIsChecked 함수를 사용하여 isChecked 상태를 업데이트할 수 있음.

• useState 구조 분해 할당 예시

    function CheckboxExample() {
      // 1번 코드를 풀어쓰면
      const [isChecked, setIsChecked] = useState(false); //1번
      // 2번 코드와 같습니다.
      const stateHookArray = useState(false); // 2번
      const isChecked = stateHookArray[0];
      const setIsChecked = stateHookArray[1];
    }

state 갱신하기

function CheckboxExample() {
  // 1. isChecked라는 상태값을 useState 훅을 사용하여 선언하고 초기값을 false로 설정합니다.
  const [isChecked, setIsChecked] = useState(false);

  // 2. handleChecked 함수는 체크박스의 체크 상태가 변경될 때 호출됩니다.
  //    이벤트 객체를 매개변수로 받아서 event.target.checked 값을 사용하여
  //    isChecked 상태값을 업데이트합니다.
  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  // 3. JSX를 반환하여 화면에 렌더링합니다.
  //    체크박스와 상태값에 따라 표시되는 메시지를 보여줍니다.
  return (
    <div className="App">
      {/* 4. 체크박스 요소를 생성합니다.
            - type="checkbox": 체크박스 타입을 지정합니다.
            - checked={isChecked}: isChecked 상태값을 사용하여 체크 상태를 지정합니다.
            - onChange={handleChecked}: 체크 상태 변경 시 handleChecked 함수를 호출합니다.
      */}
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      
      {/* 5. 상태값에 따라 표시되는 메시지를 생성합니다.
            isChecked 값이 true이면 "Checked!!"을, false이면 "Unchecked"을 표시합니다.
      */}
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

1. 상태(State) 및 변수(Variables) 정의
2. 이벤트 핸들러(Event Handlers) 작성
3. JSX 작성 및 컴포넌트 반환

handleChecked 함수는 체크박스의 체크 상태가 변경될 때 호출될 수 있는 이유는 onChange 이벤트 핸들러로 사용되기 때문

정리

isChecked : state를 저장하는 변수
setIsChecked : state isChecked를 변경하는 함수
useState : state hook
false : state 초깃값

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);