useState

State는 영단어 사전에 찾아보면 상태라는 의미를 가지고 있는데, 리액트에서도 비슷한 의미를 가지고 있다. useState라는 것은 상태를 관리한다는 목적으로 사용되는데, 이를 위해서는 리액트의 기본적인 구조부터 다시 살펴볼 필요가 있다.

Re-Rendering

const componentExample = () => {
  const name = "디디";
  return <div>{name}</div>;
};

지난 번의 글에서 위와 같은 함수형 컴포넌트를 구성했었다. 그러나 만약 저기서 {name}에 들어갈 값이 바꾸어야 한다면 어떤 식으로 바뀌게 될까? 당연히 바뀐 값을 넣어 다시 컴포넌트를 랜더링 해주는 식으로 진행하여야 한다. 순수 자바스크립트로 구현했다고 한다면 값을 바꾼 뒤 파싱해서 값을 바꾸거나 페이지 전체를 reload 했겠지만, 리액트는 딱 그 컴포넌트만 re-render 해줄 수 있다. 거기다 값이 바뀌었을 때를 자동으로 인식한다는 점도 리액트의 강점이라고 할 수 있다. 이러한 방식으로 상태관리를 진행한다고 보면 될 것 같고, 이를 위해 useState를 사용한다.

useState 왜 쓰는거야? 아직 이해가 안돼 !

버튼을 누르면 카운터가 올라가는 컴포넌트를 만든다고 가정하고, 대충 컴포넌트를 작성해보자.

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

  return (
    <div>
      <button
        onClick={() => {
          count += 1;
          console.log(count);
        }}
      >
        click
      </button>
      <h2>{count}</h2>
    </div>
  );
};

export default Counter;

이렇게 코드를 작성하는 것이 일반적이겠지만, 바뀐 <h2>count</h2>의 값이 반영되지 않는다. 그치만 콘솔에는 제대로 된 값들이 찍힌다. 이는 컴포넌트가 랜더링 되지 않아 바뀐 값이 적용되지 않는 경우다. 이를 해결하기 위해 useState를 사용해보자.

useState 사용 방법

아무런 세팅도 되어있지 않은 상태에서는 곧바로 상태관리를 진행할수가 없다. CRA로 프로젝트를 구성해보면 import React from 'react'와 같이 상단에 import가 되어있는 모습을 볼 수 있을 텐데, 이를 다음과 같은 코드로 수정해주자.

import React, { useState } from "react";

앞으로 사용할 여러 기능들도 저 중괄호 안에 들어갈 예정이니 바로 시도해보는 것이 좋을 것 같다. 무튼 저런식으로 선언을 해준다면 사용할 준비는 끝났고, 바로 실행에 옮기면 된다.

선언부

리랜더링의 원인은 count의 값이 바뀌기 때문이다. 그러면 count를 state로 선언해주면 된다. 코드는 다음과 같이 작성한다.

const [count, setCount] = useState(0); // 네이밍은 보통 이런 식으로 한다, '국룰'이라고 이해하면 좋을 것 같다.

Set 함수의 사용

count는 알겠는데, setCount는 도대체 왜 등장한걸까? 객체지향에서 주로 쓰이는 getter, setter를 알면 수월할 것 같다. 객체지향에서는 값을 직접적으로 수정하지 않고 set 함수를 활용하는데, 리액트도 비슷하게 사용한다. 다행히도 get 함수는 쓰지 않고 그냥 count만 적어주면 현재의 count 값을 가져올 수 있다. 저렇게 선언을 해준다면 button의 onClick 이벤트에 들어갈 함수도 교체를 해줘야 한다. 값을 직접적으로 바꾸지 않기 위해 setCount를 사용해보자.

<button
  onClick={() => {
    setCount(count + 1);
  }}
></button>

코드를 해석해보자면 클릭 이벤트가 발생했을 때 set 함수를 활용하여 count에 1을 더한 값을 다시 count에 넣어주는 구조이다. 이 부분만 수정해주면 코드는 정상적으로 작동하는데, 완성된 코드를 보자.

최종 코드

import React, { useState } from "react";

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

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        click
      </button>
      <h2>{count}</h2>
    </div>
  );
};

export default Counter;

크롬의 확장 프로그램에서 React Developer Tools를 설치하고 Highlight updates when components render.을 체크해주면 실시간으로 Re-Rendering 되는 내 컴포넌트를 확인할 수 있다.