프론트엔드 상태 관리의 모든 것｜Context, Props, 전역 상태 완벽 가이드

🔄 프론트엔드 상태 관리의 모든 것｜Context, Props, 전역 상태 이해하기

안녕하세요, 퍼블리셔 노미입니다!
지금까지 우리는 HTML/CSS/JS, fetch API, 로그인 인증까지 실전 웹 기능을 차근차근 배워왔죠.
하지만 프로젝트가 점점 커지면, 하나의 문제를 반드시 마주하게 됩니다.

바로 상태(State)를 어떻게 관리할 것인가?입니다.
오늘은 프론트엔드 개발자라면 반드시 이해해야 할 상태 관리의 개념부터 props, Context, 전역 상태까지 기초부터 실전까지 완벽하게 정리해드릴게요.

---

📌 상태(state)란?

상태는 UI의 현재 모습이나 데이터의 값을 의미합니다.
예를 들어:

• 버튼 클릭 횟수
• 로그인 여부
• 폼에 입력된 값

→ 이런 것들이 모두 “상태”이며, 사용자의 행동에 따라 변하고, 그에 따라 화면도 바뀝니다.

---

🔧 상태를 저장하는 방식들

1. 컴포넌트 내부 상태 (useState)
2. 상위 → 하위 전달 (props)
3. Context API로 전역 상태 전달
4. 외부 라이브러리 사용 (Redux, Zustand 등)

---

📦 props란?

props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방식입니다.

// 부모 컴포넌트
function App() {
  return <Header username="노미" />
}

// 자식 컴포넌트
function Header(props) {
  return <h1>안녕하세요, {props.username}</h1>
}

props는 단방향으로만 전달되고, 자식은 값을 수정할 수 없어요.

---

😵 props drilling이란?

컴포넌트 구조가 깊어질수록, 중간 단계에서 필요한 데이터가 없는데도 연달아 props를 전달해야 하는 현상이 생깁니다.

// App → Layout → Sidebar → Profile → username 전달

→ 이런 상황에서는 코드를 관리하기 어려워지고, 전역 상태가 필요해집니다.

---

🌍 Context API란?

Context는 리액트 전역 데이터 저장소로, props 없이 컴포넌트 트리 전체에 데이터를 전달할 수 있게 해줍니다.

// 1. Context 생성
const UserContext = React.createContext();

// 2. Provider 설정
function App() {
  return (
    <UserContext.Provider value="노미">
      <Profile />
    </UserContext.Provider>
  );
}

// 3. 하위 컴포넌트에서 사용
function Profile() {
  const username = React.useContext(UserContext);
  return <p>사용자: {username}</p>
}

→ props 없이도 깊은 컴포넌트까지 데이터 접근 가능!

---

⚖ Context의 장단점

장점	단점
props drilling 해소	너무 많은 Context 사용 시 코드 복잡도 증가
전역 상태 공유 용이	리렌더링 최적화 어려움 (memoization 필요)

---

🧪 실전 예제: 다크 모드 상태 공유

const ThemeContext = React.createContext();

function App() {
  const [dark, setDark] = useState(false);
  return (
    <ThemeContext.Provider value={{ dark, setDark }}>
      <Page />
    </ThemeContext.Provider>
  );
}

function Page() {
  const { dark, setDark } = useContext(ThemeContext);
  return (
    <button onClick={() => setDark(!dark)}>
      {dark ? '라이트 모드로' : '다크 모드로'}
    </button>
  );
}

---

🧠 전역 상태 관리가 필요한 상황

• 로그인 정보 (유저 정보, 인증 상태)
• 사이트 전체 테마
• 쇼핑몰의 장바구니
• 알림 시스템, 모달 상태 등

→ 이럴 땐 Context나 외부 상태관리 도구를 써야 해요.

---

🧰 Context 외의 상태관리 도구

• Zustand – 가볍고 쉬운 전역 상태 관리
• Redux – 복잡한 상태 로직에 강력
• Recoil – 리액트 친화적인 상태 관리

Zustand 기본 예제

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>
}

---

✅ 상태 관리 정리

방식	범위	특징
props	부모 → 자식	가장 기본적 / 단방향
Context	전역	props 없이 데이터 전달 가능
Zustand	전역	간단한 사용법 / 빠른 도입
Redux	전역	대형 앱에 적합 / 복잡

---

📚 마무리하며

상태 관리는 프론트엔드의 핵심 중 핵심입니다.
props, Context, 전역 상태 도구들이 각각 언제, 왜 필요한지를 이해하면 복잡한 프로젝트도 훨씬 효율적으로 관리할 수 있어요.

다음 편에서는 Zustand를 이용한 실전 전역 상태 관리를 실습으로 이어갈게요!

---

#상태관리기초 #propsdrilling #ContextAPI #React전역상태 #Zustand사용법 #프론트엔드기본 #퍼블리셔노미 #리액트실전가이드