state

🔍 state란?

state는 현재 컴포넌트에서 생성이 가능하고 변할 수 있는 데이터다.
state는 오직 state가 생성된 컴포넌트 내에서만 변경 가능하다.

💡 props, state의 차이

props

변하지 않는 데이터

부모 컴포넌트(외부)에서 상속받는다.

변경 불가하다.

state

변할 수 있는 데이터

내부 컴포넌트에서 생성이 가능하다.

변경 가능

------------------------

👨‍🏫 예제

📌 1.

import { useState } from "react";

useState를 이용하기 위해 React로부터 useState를 import 키워드로 불러온다.

---

📌 2.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
//const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
}

useState문법 예시이다. useState를 컴포넌트 안에서 호출해준다.

💡

isChecked : state를 저장하는 변수

setIsChecked : state isChecked 를 변경하는 함수

useState : state hook

false : state 초깃값

위 코드를 풀어쓰면 아래와 같다.

  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];

isChecked, setIsChecked 는 useState 의 리턴값을 구조 분해 할당한 변수다.

---

📌 3.

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
// JSX에서 삼항연산자 사용 예시

state변수에 저장된 값을 사용하기 위해 JSX 엘리먼트 안에 직접 불러서 사용 가능하다.
이 때 isCheck는 boolean값을 가지기 때문에 삼항연산자를 사용한다.

---

📌 4.

state를 갱신하기 위해 state 변수를 갱신하는 함수인 setIsChecked를 호출한다.

 function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

input[type=checkbox] JSX 엘리먼트의 값 변경에 따라서 isChecked 가 변경되어야한다.
사용가자 체크박스 값을 변경하면 onChange이벤트가 이벤트 핸들러 함수인 handleChecked를 호출한다.
이 함수가 setIsChecked를 호출하고 호출된 결과에 따라 isChecked변수가 갱신되며
새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링한다.

---

👨‍🏫 결과

컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 한다.