React_6. State

State의 개념

State는 Props와 달리 내부에서 변할 수 있는 값이다. 이러한 State의 예는 Toggle Switch 같은 클릭에 따라 변화하는 UI나 체크박스, 장바구니 같은 것들이 있다. 그렇다면 리액트는 이러한 State를 어떻게 다룰까? useState라는 특별한 함수를 이용하면 쉽게 제어가 가능하다.

useState와 state hook

Hook은 함수형 컴포넌트에서도 상태 관리를 할 수 있도록 해주는 리액트의 기능으로 대표적인 Hook이 바로 useState이다. useState의 사용 방법은 다음과 같다.

먼저 useState를 컴포넌트 안에서 호출한다. useState가 호출되었다는 것은 state 변수를 선언한 것과 같으며, 이렇게 선언된 변수는 일반적인 변수와 달리 함수 실행이 끝나도 사라지지 않는다. useState를 호출하면 배열을 반환하는데, 다음과 같이 구성된다.

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

배열의 첫 번째 요소는 현재 state 변수이고, 두 번째 요소는 이 state 변수를 변경해주는 함수이다. 또한 useState에 인자로 초깃값을 넘겨줄 수 있다. 이러한 state 변수는 JSX 안에서 직접 불러와 사용할 수 있다. 다음 체크박스 예시를 통해 확인해 보자.

function Checkbox() {
  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>
  );
} 

첫 번째로 Checkbox라는 컴포넌트를 선언한 뒤 그 안에 useState 함수를 설정한다. isChecked는 현재 state 변수를 저장하며, useState의 인자(초깃값)로 false를 넘겼으므로, 현재 state는 false이다. 이러한 상태를 변경해주기 위한 함수 setIsChecked를 다시 handleChecked라는 이벤트 핸들러 함수에 넣고, onChange 이벤트가 호출할 수 있도록 지정한다.(onChange={handleChecked}) 이러한 설정이 끝나고 사용자가 체크박스를 클릭하면 이벤트 핸들러 함수 handleChecked가 실행되고, isChecked는 true로 바뀐다. 현재 state가 true로 바뀌었으므로 span 태그의 삼항연산 결과는 "Checked!!"를 반환한다.

참고
리액트 공식문서