[react 번역] useState

출처: https://react.dev/reference/react/useState

개요

useState는 컴포넌트에 state 변수를 추가할 수 있게 해주는 React Hook입니다. 값이 바뀔 때마다 컴포넌트가 리렌더링됩니다.

const [state, setState] = useState(initialState)

Reference

`useState(initialState)`

컴포넌트의 최상위에서 useState를 호출하면 state 변수를 선언할 수 있습니다.

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());
  // ...
}

파라미터

initialState: state의 초기값. 어떤 타입이든 가능하며, 함수로 전달하면 초기화 함수로 한 번만 실행됩니다.

반환값

[state, setState]: 현재 state와, state를 업데이트하는 set 함수가 배열로 반환됩니다.

set 함수 (setState)

set 함수는 state를 업데이트하고 리렌더를 트리거합니다. 다음 state를 직접 전달하거나, 이전 state를 인자로 받아 계산하는 함수(updater)를 전달할 수 있습니다.

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

function handleClick() {
  setCount(count + 1); // 직접 값 전달
  setCount(prev => prev + 1); // 이전 state 기반 업데이트
}

set 함수는 반환값이 없습니다.
set 함수 호출 후 바로 state를 읽으면 이전 값이 반환됩니다(업데이트는 다음 렌더에 반영).
set 함수에 함수(업데이트 함수)를 전달하면, React가 이전 state를 인자로 넘겨줍니다.

사용법

컴포넌트에 state 추가하기

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <div>카운트: {count}</div>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </>
  );
}

이전 state 기반 업데이트

setCount(prev => prev + 1);

객체/배열 state 업데이트

setObj(obj => ({ ...obj, x: 10 }));
setArr(arr => [...arr, newItem]);

초기화 함수 사용

const [todos, setTodos] = useState(() => createTodos());

트러블슈팅

set 함수 호출 후 state가 바로 바뀌지 않는 경우

set 함수는 다음 렌더에만 state를 반영합니다. 즉시 state를 읽으면 이전 값이 반환됩니다.
필요하다면 set 함수에 넘길 값을 미리 변수에 저장하세요.

state를 직접 변경해도 화면이 갱신되지 않는 경우

state 객체/배열을 직접 변경하지 말고, 항상 새 객체/배열을 만들어 set 함수에 전달하세요.

"Too many re-renders" 오류

렌더링 중에 set 함수를 무조건 호출하면 무한 루프가 발생합니다. 반드시 조건문이나 이벤트 핸들러 등에서만 호출하세요.

Strict Mode에서 초기화/업데이트 함수가 두 번 실행되는 경우

개발 환경에서만 순수성 검증을 위해 두 번 실행됩니다. 한 번의 결과만 사용되므로, 순수 함수라면 문제 없습니다.

함수 자체를 state로 저장하고 싶을 때

set 함수에 함수를 직접 전달하면 React가 업데이트 함수로 인식합니다. 함수 자체를 저장하려면 () => someFunction처럼 래핑하세요.