state와 useState 훅 기초

지난 장에서 우리는 props를 이용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법을 배웠습니다. props는 컴포넌트 외부에서 전달받는 읽기 전용 데이터였죠. 하지만 웹 애플리케이션은 사용자의 상호작용(버튼 클릭, 입력 등)에 따라 동적으로 UI가 변경되어야 하는 경우가 많습니다.

예를 들어, '좋아요' 버튼을 누르면 좋아요 수가 증가하거나, 입력 필드에 텍스트를 입력하면 해당 텍스트가 화면에 실시간으로 반영되어야 합니다. 이러한 컴포넌트 내부에서 변경될 수 있는 동적인 데이터를 관리하기 위해 리액트는 state(상태) 라는 개념을 제공합니다.

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

state란 무엇인가?

state는 컴포넌트 내부에서 관리되며, 시간이 지남에 따라 변할 수 있는 데이터를 의미합니다. props가 외부로부터 전달받는 '속성'이라면, state는 컴포넌트 스스로가 '가지고 있는 상태'라고 이해할 수 있습니다. state가 변경되면, 리액트는 해당 state를 사용하는 컴포넌트를 자동으로 재렌더링(re-render) 하여 변경된 UI를 화면에 반영합니다.

state의 주요 특징

• 컴포넌트 내부에서 관리: state는 특정 컴포넌트에 종속되며, 그 컴포넌트 내부에서만 변경될 수 있습니다.
• 가변적인 데이터: 사용자의 상호작용, 네트워크 응답 등 외부 요인에 의해 값이 변경될 수 있습니다.
• state 변경 시 재렌더링: state가 변경되면 리액트는 자동으로 해당 컴포넌트를 다시 그리고, 변경된 state 값을 반영합니다. 이는 선언적 UI의 핵심 원리 중 하나입니다. 개발자가 직접 DOM을 조작할 필요 없이, state만 변경하면 리액트가 알아서 UI를 업데이트해 줍니다.

useState 훅 소개

과거에는 클래스형 컴포넌트에서만 state를 사용할 수 있었습니다. 하지만 리액트 16.8 버전부터 도입된 Hooks(훅스) 덕분에 함수형 컴포넌트에서도 state를 비롯한 다양한 리액트 기능을 사용할 수 있게 되었습니다. useState는 그중에서도 가장 기본적인 훅이며, 함수형 컴포넌트에서 state를 관리할 수 있도록 해줍니다.

Hooks의 규칙

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

이러한 규칙은 리액트가 훅의 상태를 올바르게 관리할 수 있도록 돕습니다.

useState 훅 사용법 기초

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

import React, { 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 React, { useState } from 'react';

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

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

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

useState 훅을 사용하여 간단한 토글(Toggle) 버튼을 만들어 보겠습니다. 버튼을 누를 때마다 텍스트가 '켜짐'과 '꺼짐' 상태로 번갈아 바뀌도록 할 것입니다.

import React, { useState } from 'react';

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

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

  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 React from 'react';
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;

state 업데이트 시 주의사항

• 직접 state를 변경하지 마세요! 절대 state변수 = 새로운값과 같이 직접 state 변수에 값을 할당하여 변경해서는 안 됩니다. 이렇게 하면 리액트가 state의 변경을 감지하지 못하여 UI가 재렌더링되지 않습니다.

  // ❌ 잘못된 예시: 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는 setCount가 호출될 시점의 최신 count 값을 보장해 줍니다. 이는 특히 여러 번의 state 업데이트가 빠르게 일어날 때 유용합니다. (이 부분은 나중에 더 깊이 다루겠습니다.)

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