(React) useState 기본 사용법 정리, 주의할 점

 

 

리액트는 다양한 내장 함수인 훅(hook)을 제공하며, useState도 그중 하나이다.

useState는 리액트에게 특정 상태(state)가 변경될 때 컴포넌트를 다시 렌더링 해달라고 요청하기 위해 사용된다.

상태가 없다면 리액트는 어떤 변화를 기준으로 렌더링해야 할지 모르기에, 상태를 통해 이러한 변화를 리액트에게 알려주는 것이다.

 

 

 

기본 사용 방법

useState는 크게 다음 과정을 거쳐 사용할 수 있다.

1. useState import 하기
2. useState()함수로 state(상태변수)와 setState(상태 변수 변경 함수) 생성하기
3. state(상태변수)가 변경돼야 하는 부분에 setState(상태 변수 변경 함수)를 사용해 상태변수 변경하기

import { useState } from 'react'; //useState를 사용하기 위해서는 import해야한다

function CounterExample() {
  // count 상태 변수, setCount라는 상태를 변경하는 함수가 useState로 생성됨
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    // count 상태를 변경하는 함수 setCount를 호출하여 count를 1 증가시킨다
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>
        Click me
      </button>
    </div>
  );
}

export default CounterExample;

 

 

 

주의점

setState(상태 변수 변경 함수)를 사용해 state(상태 변수)를 변경하면,

리액트가 변경을 감지한 뒤 컴포넌트(위의 예시에서는 ExampleComponent)를 다시 렌더링 한다.

이는 상태가 변경되면 컴포넌트가 전체적으로 다시 렌더링 되어 변경된 상태가 반영된다는 뜻이다.

이때 상태 변경 함수인 setState는 비동기적으로 동작한다.

 

즉, 상태가 즉시 변경되지 않고, 리렌더링 후에야 새로운 상태가 적용된다는 것이다.

따라서 상태가 변경되기 전에 상태 값을 사용하려고 하면, 여전히 이전 값을 참조한다.

 

아래 예시코드를 실행시켜 보면 콘솔에서 출력되는 count 값이 업데이트 이전의 값을 가리킨다는 것을 알 수 있다.

 

import { useState } from 'react';

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

  const incrementCount = () => {
    setCount(count + 1);
    // 여기에서 count는 업데이트 이전의 값을 가리킨다.
    console.log('count:', count); // 이는 변경되기 전 값이 출력된다.
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>
        Click me
      </button>
    </div>
  );
}

export default CounterExample;