[React] State

State란?

state는 React에서 지원하는 JavaScript 객체로, 렌더링 결과물에 영향을 주는 정보를 가지고 있다.

 

useState

useState를 이용하여 state와 state의 값을 수정할 수 있는 함수를 생성하고, 초기값을 설정할 수 있다.

 

아래와 같은 코드가 있다고 할 때,

const [state, setState] = React.useState(0); // state 선언 및 초기화. 초기값: 0

"state" 자리에 state명을 넣고, "setState"에는 값을 수정할 함수명, useState의 매개변수에 초기값을 넣어 사용한다.

값을 수정할 함수명이 set + "state명"일 필요는 없다.

 

setState

function onClick() {
	setState((state) => state + 1); // 현재 state에 기존 값을 가져와 1을 더하여 저장
}

위의 코드에서 setState는 onClick 함수 안에서 실행되며, state에 기존 값을 받아 1을 더한 후 저장된다. setState에서 state명 대신 다른 이름을 매개변수로 사용하여도 된다.

setState((value) => value + 1);
setState((v) => v + 1);
...

 

사용

특정 컴포넌트 안에서 클릭 횟수를 기록하는 state를 사용한다고 할 때, 아래와 같이 코드를 작성할 수 있다.

function App() {
  const [counter, setCounter] = React.useState(0); // state 선언, 초기화
  function onClick() {
    setCounter((counter) => counter + 1); // setState 작성
  };
  return (
    <div>
      <h3>Total clicks: {counter}</h3> <!-- state 사용 -->
      <button onClick={onClick}>Click!</button> <!-- setState 호출 -->
    </div>
  );
}

위의 버튼을 클릭할 때마다 onClick 함수가 실행되며, setCounter를 통해 counter의 값이 1이 늘어나는 것을 확인할 수 있다.