useState

useState

useState는 리액트에서 사용되는 특별한 함수인 hook의 일종으로 함수형 컴포넌트 내부에서 상태를 정의하고, 그 상태를 관리할 수 있게 해주는 훅이다.
useState의 반환값은 배열이며, js의 구조분해할당을 통해 다음과 같이 사용한다.

const [state, setState] = useState(initialState);

첫 번째 원소로 넘어오는 값을 통해 state값 자체를 사용할 수 있고, 두 번째로 넘어오는 setState함수를 통해 state의 값을 변경할 수 있다.

useState와 리렌더링

리액트에서 다음과 같은 코드를 구현했다고 해보자.

const App = () => {
  let count = 0;

  const addCount = () => {
    count += 1;
    console.log(count);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={addCount}>count증가</button>
    </div>
  );
};

export default App;

위의 코드는 button을 클릭할때마다 count의 값을 1씩 증가시키고, 해당 count값을 console에서 보여주는 기능을 갖고있다.

하지만 버튼을 아무리 클릭해도 화면에는 변화가 없다.
하지만 개발자모드를 통해 콘솔을 확인하면 count의 값은 1씩 증가되어 출력되고있다.

왜 이런일이 발생할까?
리액트에서 렌더링은 함수형 컴포넌트의 return과 클래스형 컴포넌트의 render를 실행한 후 이 실행 결과를 이전의 리액트 트리와 비교해 리렌더링이 필요한 부분만 업데이트를 한다.
따라서 리렌더링이 일어나기 위해서는 App컴포넌트의 함수가 리액트에 의해 재평가를 받아야 한다
하지만 위의 코드는 한번만 실행되고 재평가가 일어나지 않기 때문에 화면이 다시 그려지지 않는다.

useState

이럴때 사용하는 hook이 useState로, 해당 hook은 set함수를 통해 state값을 변화시키면 해당값과 이전 값을 비교하여 리렌더링을 발생시켜준다.
따라서 위의 코드는 다음과 같이 바꿀 수 있다.

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  const addCount = () => {
    setCount((prevCount) => prevCount + 1);
    console.log(count);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={addCount}>count증가</button>
    </div>
  );
};

export default App;

setState의 주의점

위의 사진을 자세히 보면 이상한점이 하나 있다.
코드에서는 setCount를 통해 count를 업데이트한 뒤 console.log를 통해 count의 값을 출력하고 있기 때문에 console.log를 통해 출력되는 count는 1부터 시작되어야 할것 같지만 0부터 시작하고있다.
왜냐하면 set함수는 다음 렌더링에 대한 state 변수만 업데이트하기 때문이다.
따라서 해당 컴포넌트가 재평가되어 다시 그려지기 이전에는 state값에는 여전히 변화하기 전의 값이 담겨있는 것이다.