리액트 | useState Hook 간단하게 이해하기

이 글에서는 리액트의 대표적인 Hook인 useState에 대해 간단하게 정리해보고자 한다. 깊이가 있는 글은 아니고, 코더(coder)의 입장에서 useState를 어떻게 사용하고, 어떠한 상황에서 업데이트가 진행되는지 정도로 간단하게 정리했다.

---

useState 살펴보기

useState는 리액트에서 제공하는 가장 기본적인 상태(state)관리를 할 수 있는 Hook이다.

useState를 사용하기 위해서는 먼저 아래와 같이 useState를 import 해야 한다. (useState를 사용할 컴포넌트(함수)가 JavaScript 파일에 import 하면 된다.)

import { useState } from "react";

useState는 항상 state와 setState가 쌍으로 선언된다. useState는 함수 내에서 아래와 같이 선언할 수 있다.

function Example() {
  const [state, setState] = useState(initialValue);

  return null;
}

여기서 state는 상태변수로, 사용자가 사용할 변수 이름을 입력하면 된다. setState는 하나의 함수로, 변수 state를 업데이트할 때 사용한다. 일반적으로 useState를 선언할 때 [banana, setBanana]와 같이 이름을 동일하게 선언한다. useState() 괄호 안에 들어가는 값은 변수 state의 초기값이다.

 

state 변수를 새로운 값으로 업데이트하고 싶을 땐, setState 함수를 사용하여 업데이트하며, 값이 업데이트되면 리액트는 자동으로 리렌더링을 작동하여 업데이트 된 state 변수 값을 페이지에 반영한다.

 

아래 간단한 코드를 통해 동작을 이해해보자.

import { useState } from "react";

function UseStateExample() {
  const [count, setCount] = useState(0);

  const onClick = () => {
    setCount(10);
  };

  return (
    <div>
      <h1>useState Example</h1>
      <h3>count : {count}</h3>
      <button onClick={onClick}>click</button>
    </div>
  );
}

export default UseStateExample;

 

버튼이 눌리면 변수의 값이 바뀌는 간단한 코드이다. 코드를 한 줄씩 살펴보면 다음과 같다.

• useState를 이용하여 변수 count와 변수 count를 컨트롤할 수 있는 setCount를 선언하고, 변수 count의 초기 값은 0으로 세팅
• onClick 함수를 통해 버튼이 눌리면, 변수 count의 값이 setCount 함수를 통해 값이 10으로 변경됨

위 코드를 처음 실행하면 변수 count는 초기값이 0이기 때문에 아래와 같은 페이지가 나타난다.

여기서 click 버튼을 누르면, onClick 함수에 의해 setCount(10)이 동작한다. setCount(10)에 의해 변수 count의 값이 10으로 바뀌고 해당 값을 페이지에 반영하기 위해 리렌더링된다. 버튼을 누른 후 해당 페이지는 아래와 같이 바뀐다.

useState에 대해 간략하게 정리하면 다음과 같다.

• useState는 사용자의 반응에 따라 값을 변화시키고, 이를 페이지에 반영할 때 사용한다.
• useState를 사용하면 state와 setState를 생성하는데, state는 변수, setState는 state 변수 값을 바꿀 때 사용하는 함수이다.
• 위 예시와 같이 값을 직접 할당하는 방법으로 setState를 사용할 수도 있지만, 함수를 이용하여 현재의 값을 바탕으로 새로운 값을 계산하여 할당할 수도 있다.

setState에 함수를 할당하는 방법의 코드는 아래 코드와 같이 만들 수 있다.

import { useState } from "react";

function UseStateExample() {
  const [count, setCount] = useState(0);

  const onUpClick = () => {
    setCount((curr) => curr + 1);
  };

  const onDownClick = () => {
    setCount((curr) => curr - 1);
  };

  return (
    <div>
      <h1>useState Example</h1>
      <h3>count : {count}</h3>
      <button onClick={onUpClick}>up</button>
      <button onClick={onDownClick}>down</button>
    </div>
  );
}

export default UseStateExample;