Ch.12 React 상태 관리 — 살아 움직이는 UI

useState — 변하는 데이터

useState Hook의 사용법을 이해하고 적용할 수 있다상태 업데이트가 리렌더링을 유발하는 원리를 설명할 수 있다여러 상태를 독립적으로 관리하는 방법을 알 수 있다

변수를 바꿔도 화면이 안 바뀐다?

일반 변수로는 화면이 자동으로 업데이트되지 않습니다. React만의 특별한 데이터 관리 방법이 필요합니다.

데이터가 바뀌면 화면도 자동으로 바뀌려면?

useState — React에게 '이 데이터가 바뀌면 화면을 다시 그려줘'라고 알려주는 Hook입니다.

article

핵심 내용

일반 변수를 바꿔도 React는 화면을 다시 그리지 않습니다

핵심 차이 일반 변수 (`let count = 0`) → 값이 바뀌어도 React가 모름 → 화면 그대로 useState (`const [count, setCount] = useState(0)`) → setCount() 호출 시 React에게 '바뀌었어!' 알림 → 화면 자동 갱신

useState는 [현재값, 변경함수] 두 가지를 반환합니다

import { useState } from "react";

function LikeButton() {
  // [현재값, 변경함수] = useState(초기값)
  const [likes, setLikes] = useState(0);
  const [isLiked, setIsLiked] = useState(false);

  const handleLike = () => {
    if (isLiked) {
      setLikes(likes - 1);
      setIsLiked(false);
    } else {
      setLikes(likes + 1);
      setIsLiked(true);
    }
  };

  return (
    <button onClick={handleLike}>
      {isLiked ? "❤️" : "🤍"} 좋아요 {likes}
    </button>
  );
}

사용자 클릭: 버튼의 onClick 이벤트 발생

setCount 호출: 새로운 값으로 state 변경 요청

리렌더링: React가 컴포넌트를 새 state로 다시 실행

화면 갱신: 변경된 부분만 DOM에 반영

관련 없는 데이터는 별도의 state로 분리합니다

import { useState } from "react";

function UserProfile() {
  // 각각 독립적인 state
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [hobbies, setHobbies] = useState([]);
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
    <div>
      <h2>프로필 설정</h2>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="이름 입력"
      />
      <p>이름: {name || "미입력"}</p>
      <p>나이: {age}</p>
      <button onClick={() => setAge(age + 1)}>
        나이 +1
      </button>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>
        {isDarkMode ? "☀️ 라이트 모드" : "🌙 다크 모드"}
      </button>
    </div>
  );
}

state 분리 원칙 1. 함께 변하는 데이터 → 하나의 state 객체로 묶기 2. 독립적인 데이터 → 별도의 useState로 분리 3. 파생 가능한 데이터 → state 대신 계산으로 구하기 예: `fullName = firstName + lastName` → fullName은 state로 만들 필요 없음!

useState(0)이 반환하는 것은?

일반 let 변수의 값을 바꾸면 React가 자동으로 화면을 다시 그린다

useState의 상태 변경 함수를 호출하면 React는 컴포넌트를 ___한다

useState 마스터!

edit_note

정리 노트

useState — 변하는 데이터 관리

useState 기본

const [값, set함수] = useState(초기값): 상태 변수와 업데이트 함수를 쌍으로 반환
리렌더링: set함수 호출 → 상태 변경 → 컴포넌트 자동 리렌더링
불변성: 상태를 직접 수정하지 않고 새 값으로 교체

상태 관리 패턴

여러 상태: useState를 여러 번 호출하여 독립적인 상태 관리
객체/배열 상태: 스프레드 연산자(...)로 복사 후 변경
상태 끌어올리기: 공통 부모에 상태를 두고 props로 전달

★

상태가 바뀌면 React가 화면을 다시 그립니다 — 이것이 '반응형'의 핵심입니다.

image

시각 자료

다이어그램: wd-scene-react-state

check_circle

핵심 정리

1useState = [현재값, 변경함수], 초기값을 인자로 전달
2setter 함수 호출 → React가 리렌더링 → 화면 자동 갱신
3독립적인 데이터는 별도의 useState로 분리

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작