state와 useState 훅 기초

앞 절에서 우리는 props를 이용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법을 배웠습니다.

props는 컴포넌트 외부에서 전달받는 읽기 전용 데이터였죠.

하지만 웹 애플리케이션은 사용자의 상호작용(버튼 클릭, 입력 등)에 따라 동적으로 UI가 변경되어야 하는 경우가 많습니다.

예를 들어, 좋아요 버튼을 누르면 좋아요 수가 증가하거나, 입력 필드에 텍스트를 입력하면 해당 텍스트가 화면에 실시간으로 반영되어야 합니다.

이러한 컴포넌트 내부에서 변경될 수 있는 동적인 데이터를 관리하기 위해 리액트는 state(상태)라는 개념을 제공합니다.

이번 장에서는 리액트의 state가 무엇인지, 왜 중요한지, 그리고 함수형 컴포넌트에서 state를 관리하는 가장 기본적인 방법인 useState 훅(Hook)에 대해 자세히 알아보겠습니다.

state란 무엇인가?

state는 컴포넌트 내부에서 관리되며, 시간이 지남에 따라 변할 수 있는 데이터를 의미합니다.

props가 외부로부터 전달받는 속성이라면, state는 컴포넌트 스스로가 가지고 있는 상태라고 이해할 수 있습니다.

state가 변경되면, 리액트는 해당 state를 사용하는 컴포넌트를 자동으로 재렌더링(re-render)하여 변경된 UI를 화면에 반영합니다.

• 컴포넌트 내부에서 관리: state는 화면 트리의 해당 컴포넌트 위치에 속합니다. setter를 자식에 전달하거나 자식의 콜백 요청을 받아 부모가 호출할 수도 있으므로, 상태의 소유 위치와 호출 위치를 구별합니다.
• 가변적인 데이터: 사용자의 상호작용, 네트워크 응답 등 외부 요인에 의해 값이 변경될 수 있습니다.
• state 변경 시 재렌더링: state가 변경되면 리액트는 자동으로 해당 컴포넌트를 다시 그리고, 변경된 state 값을 반영합니다. 이는 선언적 UI의 핵심 원리 중 하나입니다. 개발자가 직접 DOM을 조작할 필요 없이, state만 변경하면 리액트가 알아서 UI를 업데이트해 줍니다.

useState 훅 소개

과거에는 클래스형 컴포넌트에서만 state를 사용할 수 있었습니다.

하지만 리액트 16.8 버전부터 도입된 Hooks(훅스) 덕분에 함수형 컴포넌트에서도 state를 비롯한 다양한 리액트 기능을 사용할 수 있게 되었습니다.

useState는 그중에서도 가장 기본적인 훅이며, 함수형 컴포넌트에서 state를 관리할 수 있도록 해줍니다.

• 최상위에서만 호출: 훅은 리액트 함수 컴포넌트의 최상위(at the top level)에서만 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서는 훅을 호출할 수 없습니다.
• 리액트 함수 컴포넌트에서만 호출: 훅은 일반 자바스크립트 함수에서는 호출할 수 없고, 오직 리액트 함수 컴포넌트 또는 커스텀 훅에서만 호출해야 합니다.

useState 같은 Hook의 호출 순서가 렌더마다 같아야 React가 이전 상태와 현재 호출을 대응시킬 수 있습니다. 조건에 따라 버튼을 보여주는 것은 가능하지만, 그 조건 안에서 useState를 호출하지는 않습니다.

useState 훅 사용법 기초

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

큐: 1로 교체 → 1로 교체 → 1로 교체
다음 렌더 count: 1

setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);

큐: 0 → 1 → 2 → 3
다음 렌더 count: 3

setIsToggled(prev => !prev);
A: false → true
B: false 유지

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

큐: 1로 교체 → 1로 교체 → 1로 교체
다음 렌더 count: 1

setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);

큐: 0 → 1 → 2 → 3
다음 렌더 count: 3

setIsToggled(prev => !prev);
A: false → true
B: false 유지

useState 훅은 다음과 같은 형태로 사용합니다.

import { useState } from 'react'; // (1) useState 훅 임포트

function MyCounter() {
  // (2) useState 호출: 배열 비구조화 할당으로 state 변수와 setter 함수 얻기
  const [count, setCount] = useState(0); // 초기값은 0

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button> {/* (3) setter 함수를 이용해 state 변경 */}
    </div>
  );
}

하나씩 자세히 살펴보겠습니다.

import { useState } from 'react';

const [state변수, state변경함수] = useState(초기값);

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

실습 예제: 토글 버튼 만들기

useState 훅을 사용하여 간단한 토글(Toggle) 버튼을 만들어 보겠습니다.

버튼을 누를 때마다 텍스트가 켜짐과 꺼짐 상태로 번갈아 바뀌도록 할 것입니다.

import { useState } from 'react';

function ToggleSwitch() {
  // isToggled: 현재 상태 값 (초기값: false)
  // setIsToggled: isToggled를 변경할 때 사용하는 함수
  const [isToggled, setIsToggled] = useState(false);

  const handleToggle = () => {
    // setIsToggled 함수를 사용하여 isToggled의 현재 값을 반전
    setIsToggled(prev => !prev);
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', margin: '20px' }}>
      <h2>토글 스위치</h2>
      <p>
        현재 상태: <span style={{ fontWeight: 'bold', color: isToggled ? 'green' : 'red' }}>
          {isToggled ? '켜짐' : '꺼짐'}
        </span>
      </p>
      <button
        onClick={handleToggle}
        style={{
          padding: '10px 20px',
          fontSize: '16px',
          cursor: 'pointer',
          backgroundColor: isToggled ? '#4CAF50' : '#f44336', // 상태에 따라 버튼 색상 변경
          color: 'white',
          border: 'none',
          borderRadius: '5px'
        }}
      >
        {isToggled ? '끄기' : '켜기'}
      </button>
    </div>
  );
}

export default ToggleSwitch;

import './App.css';
import UserProfile from './components/UserProfile'; // 기존 UserProfile이 있다면 그대로 둡니다.
import ToggleSwitch from './components/ToggleSwitch'; // ToggleSwitch 컴포넌트 불러오기

function App() {
  // ... 기존 UserProfile 관련 코드 ...

  return (
    <div className="App">
      <h1>나의 React 앱</h1>

      {/* UserProfile 컴포넌트 (있다면) */}
      {/* <UserProfile name="김리액트" age={28} location="서울" /> */}

      {/* ToggleSwitch 컴포넌트 추가 */}
      <ToggleSwitch />
      <ToggleSwitch /> {/* 여러 번 재사용해도 각자 상태를 가집니다! */}

    </div>
  );
}

export default App;

두 토글의 결과를 확인할 때는 두 위치가 계속 렌더되는 조건을 유지합니다. 새로 연 화면에서는 둘 다 꺼짐 / 켜기이고, 첫 버튼만 한 번 누르면 첫 것은 켜짐 / 끄기, 둘째는 꺼짐 / 켜기를 유지해야 합니다. 다음 확인은 화면이 반영된 뒤 다시 첫 버튼을 누르는 방식으로 합니다. 이 조건이면 첫 것만 원래 표시로 돌아옵니다. 컴포넌트를 화면 트리에서 제거한 뒤 다시 추가한 경우에는 새 초기값으로 시작하므로, 단순 재렌더와 제거 후 재등장을 구별합니다. 상태 유지와 초기화의 공식 설명을 참고할 수 있습니다.

같은 ToggleSwitch 컴포넌트를 여러 번 렌더링해도, 각 인스턴스는 자기만의 state 값을 따로 가지고 독립적으로 업데이트됩니다.

state 업데이트 시 주의사항

• 직접 state를 변경하지 마세요! 이 예제의 count는 const로 선언했으므로 count = count + 1처럼 다시 대입하면 JavaScript의 TypeError가 먼저 발생합니다.

  지역 변수에 값을 대입하는 것은 React에 다음 렌더를 요청하는 일이 아닙니다. 객체·배열을 state로 쓸 때도 기존 내용을 직접 고치지 않고 새 값을 만들어 setter에 전달합니다.

  // ❌ 잘못된 예시: state를 직접 변경
  const [count, setCount] = useState(0);
  // count = count + 1; // 이렇게 하면 안 됩니다!
  
  // ⭕ 올바른 예시: setter 함수 사용
  setCount(count + 1);

• 비동기적 업데이트: useState의 setter 함수는 state를 비동기적으로 업데이트할 수 있습니다.

  즉, 같은 이벤트 핸들러에서 setCount(count + 1) 직후 console.log(count)는 그 렌더의 기존 값을 읽습니다.

  만약 이전 state 값에 의존하여 새로운 state를 계산해야 한다면, setter 함수에 콜백 함수를 전달하는 것이 안전합니다.

  // 이전 state 값에 기반하여 업데이트할 때
  setCount(prevCount => prevCount + 1);

  prevCount는 React가 업데이트 큐를 처리할 때 앞선 업데이트까지 적용한 값을 받습니다.

  같은 클릭 핸들러에서 현재 count가 2일 때, 값을 두 번 전달하면 두 호출 모두 현재 스냅샷의 2를 읽어 3으로 교체하도록 요청합니다. Updater를 두 번 전달하면 큐에서 앞 계산 결과를 다음 함수에 넘깁니다. 서로 다른 클릭 두 번은 여기의 한 핸들러 두 호출과 구별합니다.

  // 같은 핸들러, 현재 count = 2
  setCount(count + 1);
  setCount(count + 1); // 다음 렌더: 3
  
  // 별도 비교: 역시 현재 count = 2에서 시작
  setCount(c => c + 1);
  setCount(c => c + 1); // 큐 계산 2 → 3 → 4, 다음 렌더: 4

  도식의 count=0·세 호출 비교도 같은 원리입니다. 함수는 입력받은 값으로 다음 값만 계산하도록 작성합니다. Updater 안에서 알림·네트워크 요청 같은 부수 효과를 실행하지 않습니다. 업데이트 큐의 공식 설명을 확인할 수 있습니다.

이제는 props와 state라는 리액트의 양대 산맥 중 하나인 state의 기초를 다진 셈입니다.

핵심은 간단합니다.

화면에 영향을 주는 값은 일반 변수에 직접 대입하지 말고 state로 두며, 변경은 setter를 통해 다음 렌더를 요청해야 합니다.

혼자 큐와 두 토글을 추적하기

현재 count가 2인 한 핸들러에서 setCount(count + 4) 뒤에 setCount(c => c * 2)를 호출합니다. 바로 이어 console.log(count)로 읽는 값과 다음 렌더의 값을 구별하세요. 별도 상황으로 두 ToggleSwitch가 모두 꺼짐에서 시작하여 첫 스위치를 두 번, 둘째 스위치를 한 번 누릅니다. 클릭마다 다음 화면이 반영된 뒤 다음 클릭을 한다고 둘 때 최종 텍스트와 버튼 문구를 적어 보세요.

한 이벤트의 계산을 코드로 완성하기

1. 아래와 같이 count가 2에서 시작하는 Counter를 만듭니다. 한 번의 클릭에서 updater로 1을 더하고, 현재 스냅샷의 count에 4를 더한 값으로 교체하고, 마지막으로 updater로 2배를 만듭니다. 핸들러 끝의 로그와 다음 화면의 count를 각각 예측한 뒤 완성하세요. 계산 순서를 바꾸지 않으며, 다음 클릭은 화면 반영 후에만 합니다.
2. 첫 클릭이 반영된 다음 같은 버튼을 다시 한 번 클릭합니다. 두 번째 핸들러가 읽는 count와 다음 렌더 값을 계산하세요. 이 문제는 같은 핸들러 안의 세 요청과, 별도로 발생한 두 클릭을 구별하는 연습입니다.
3. 원 ToggleSwitch의 handleToggle 안에서 setIsToggled(prev => !prev)를 두 번 연속 호출하는 별도 실험을 합니다. false에서 한 번 클릭한 뒤 최종 표시를 예측하세요. 상태를 true로 한 번 바꾸는 실험과 다른 이유, updater 안에 console.log나 알림을 넣어 호출 횟수를 클릭 수로 세면 안 되는 이유도 적습니다. 중간 큐 계산값이 모두 브라우저에 표시된다고 가정하지 않습니다.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(2);

  function handleClick() {
    setCount(c => c + 1);
    setCount(count + 4);
    setCount(c => c * 2);
    console.log(count);
  }

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={handleClick}>세 요청 보내기</button>
    </div>
  );
}

다음 절부터는 이 상태 값을 여러 컴포넌트와 이벤트 흐름 속에서 더 안전하게 다루는 방법을 살펴봅니다.