React에서 상태 관리 (초보자 친화 가이드)

Source: Dev.to

“State”란 무엇인가요? (간단히)

State는 앱이 실행되는 동안 변경될 수 있는 데이터입니다.
React 앱을 정적인 웹사이트가 아니라 살아있는 페이지라고 생각하세요.

실제 생활에서의 state 예시

• 전등이 켜져 있나요 꺼져 있나요?
• 장바구니에 몇 개의 아이템이 있나요? → 3
• 사용자가 로그인했나요? → true / false
• 사용자가 입력란에 무엇을 입력했나요? → "John"

이 모든 값은 변할 수 있으며, 변할 때 화면이 업데이트되어야 합니다. 이렇게 변하는 데이터를 React에서는 state라고 부릅니다.

So What Is “State Management”?

State management is how you store, update, and share state.

In plain language:

“Where do I keep my data, and how do different parts of my app use it?”

That’s it. No magic.

React 이전: 순수 HTML + JavaScript에서 동작 방식

let count = 0;

function increase() {
  count++;
  document.getElementById("count").innerText = count;
}

여기서 일어나는 일

• count는 당신의 state입니다.
• getElementById를 사용해 화면을 직접 업데이트합니다.

이 방식은 작은 앱에서는 동작하지만, 대규모 애플리케이션에서는 다음과 같은 문제가 발생합니다:

• 변경 사항을 추적하기 어려움
• 쉽게 깨질 수 있음
• 매우 반복적임

React’s Big Idea (This Is Important)

When state changes, React automatically updates the screen.

You do not manually touch the DOM. Instead:

1. You update the state.
2. React re‑renders the UI for you.

This single idea is why React exists.

첫 번째 React 상태 예제

import { useState } from "react";

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

  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
}

여기서 무슨 일이 일어나고 있나요?

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

• count → 상태의 현재 값
• setCount → 상태를 업데이트하는 함수
• 0 → 초기값

setCount가 호출될 때:

• React가 count를 업데이트합니다
• React가 컴포넌트를 다시 렌더링합니다
• UI가 자동으로 업데이트됩니다

HTML을 직접 건드릴 필요가 없습니다.

반드시 외워야 할 규칙

상태를 직접 변경하지 마세요.
항상 setter 함수를 사용하세요.

이 규칙은 버그를 방지하고 React가 제어하도록 합니다.

컴포넌트란 무엇인가?

컴포넌트는 UI를 반환하는 JavaScript 함수일 뿐입니다.

function Greeting() {
  return <h2>Hello</h2>;
}

각 컴포넌트:

• 독립적이다
• 자신만의 상태를 가질 수 있다
• 상태가 변하면 다시 렌더링된다

로컬 상태 (쉬운 수준)

Local state는 오직 하나의 컴포넌트에만 속합니다.

예시

• 버튼이 열려 있거나 닫혀 있는 상태
• 입력 필드 값
• 토글 스위치
• 모달 표시 여부

const [isOpen, setIsOpen] = useState(false);

멘탈 모델: “이 데이터는 여기에서만 사용됩니다.”

처음 마주치는 문제: 상태 공유

상황을 상상해 보세요:

• 컴포넌트 A가 사용자를 로그인시킴
• 컴포넌트 B는 사용자가 로그인했는지 알아야 함

그들은 별개의 컴포넌트이지만 같은 데이터를 필요로 합니다.
이제 어떻게 할까요? 여기서 상태 관리가 중요해집니다.

Step 1: 상태 끌어올리기 (React의 기본 솔루션)

가장 간단한 해결책은 상태를 부모 컴포넌트로 옮기는 것입니다.

function App() {
  const [user, setUser] = useState(null);

  return (
    <>
      {/* Pass user and setUser down as props */}
    </>
  );
}

작동 방식

• 부모가 상태를 소유합니다.
• 자식 컴포넌트는 데이터를 프롭스로 받거나 함수를 프롭스로 받습니다.

✔️ 간단함
❌ 대규모 앱에서는 복잡해집니다

Step 2: 전역 상태 (더 큰 애플리케이션을 위해)

많은 컴포넌트가 동일한 데이터를 필요로 할 때(예: 로그인한 사용자, 테마, 장바구니 항목, 알림), 여러 레이어를 통해 props를 전달하는 것이 번거로워집니다. 이 문제를 prop drilling이라고 합니다.

이를 해결하기 위해 전역 상태를 사용합니다.

React에서 흔히 쓰이는 상태 관리 옵션

1️⃣ React Context (내장)

React Context Docs

적합한 경우: 인증, 테마, 언어 설정

“프롭스를 전달하지 않고 데이터를 어디서든 사용할 수 있게 합니다.”

✔️ 별도 라이브러리 필요 없음
❌ 과도하게 사용하면 복잡해지거나 성능이 저하될 수 있음

2️⃣ Redux / Redux Toolkit

Redux Quick‑Start

적합한 경우: 대규모 애플리케이션, 복잡한 데이터 흐름

정신 모델: “모든 애플리케이션 데이터를 위한 하나의 중앙 저장소.”

✔️ 예측 가능하고 구조화됨
❌ 배워야 할 개념이 더 많음

3️⃣ Zustand / Jotai (모던 & 경량)

Zustand Docs

적합한 경우: 더 깔끔한 전역 상태, 보일러플레이트 감소, 빠른 설정

이는 현대 React 앱에서 매우 인기가 많습니다.

가장 중요한 사고 모델

React 상태를 백엔드 데이터와 같이 생각해 보세요:

이렇게 보면 모든 것이 바로 와닿습니다.

권장 학습 경로 (단계 건너뛰지 마세요)

Especia (원본 내용은 여기에서 끝납니다; 자리표시자를 그대로 유지하세요.)

백엔드 마인드라면

useState 배우기

• props 전달 배우기
• state 끌어올리기 배우기

useContext 배우기

• 그 다음 Redux 또는 Zustand 배우기

바로 Redux로 바로 뛰어드는 것은 매우 흔한 초보자 실수입니다.

한 문장 요약

React에서 상태 관리는 단순히 변화하는 데이터가 어디에 존재하는지, 그리고 앱의 다양한 부분이 어떻게 해당 데이터를 접근하고 업데이트하는지에 관한 것입니다.