State Hook

State는 Toggle Switch나 Counter 처럼 컴포넌트 내부에서 변할 수 있는 값이라고 했다.

이를 다르게 표현하면 state 는 컴포넌트 안에서 다뤄지고, 업데이트 할 수 있다고도 할 수 있다.

또한 state 가 변경되면 컴포넌트가 Re-rendering 되어 사용자에게 변경된 state 에 맞는 화면을 보여준다.

import React, { useState } from "react";
import "./styles.css";

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>
  );
}

export default CheckboxExample;

React 에서는 이러한 state를 다루는 방법 중의 하나로 useState 라는 특별한 함수를 제공한다.

이 함수의 사용 방법과 작동 방식을 위의 체크박스로 예를 들어보자

• 먼저 useState 를 컴포넌트 안에서 호출해 준다. useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으면, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

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

• useState 를 호출하면 배열을 반환하는데, 배열의 첫 번째 요소는 현재 state 변수이고, 두 번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState 의 인자로 넘겨주는 값은 state 의 초기값이다.

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

• [isChecked, setIsChecked] = useState(false);에서 isChecked 와 setIsChecked 는 상태값 저장 변수와 상태값 갱신 함수를 의미한다. isChecked 라고 부르는 state 변수를 선언하고 useState() 에 이 변수를 아직 체크되지 않은 상태인 false 로 초기화한다. React 는 이 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공한다. isChecked 변수의 값은 setIsChecked 함수를 호출하여 갱신할 수 있다.
• 이 state 변수에 저장된 값을 사용하려면 JSX 안에 직접 불러서 사용하면 된다. 여기서는 isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보여지도록 삼항연산자를 사용했다.

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

• state 를 갱신하려면 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출한다. 다만, 이 함수를 직접 호출하는 것이 아닌, 사용자의 입력값을 처리하는 onChange 이벤트를 이용합니다. 사용자가 입력을 하면 onChange 이벤트 가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출하게 된다. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React 는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 리렌더링한다.

condeSnadBox로 예제 확인