7단계: 상태 관리와 Context API 사용법

상태 관리와 Context API 사용법

Next.js에서 여러 컴포넌트 간 상태를 공유하거나 페이지 전환 후에도 값을 유지하려면 전역 상태 관리가 필요합니다.
Context API는 리액트 기본 기능으로, 작고 단순한 글로벌 상태에 적합합니다.

7-1. 왜 상태 관리가 필요한가?

• props 전달이 복잡해지면 구조가 꼬임
• 로그인, 테마, 언어 설정처럼 앱 전역에서 공유되는 값 필요
• 페이지 전환 시 상태를 유지하고 싶을 때

7-2. Context API 기본 구조

import { createContext, useContext, useState } from 'react';

const AppContext = createContext();

export function AppProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <AppContext.Provider value={{ user, setUser }}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

• AppContext를 생성하고 Provider로 감싸 전역 상태를 주입
• custom hook (useAppContext)으로 쉽게 사용할 수 있음

7-3. _app.js에서 Provider 등록

// pages/_app.js
import { AppProvider } from '../context/AppContext';
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return (
    <AppProvider>
      <Component {...pageProps} />
    </AppProvider>
  );
}

• 모든 페이지에서 Context에 접근 가능하게 설정

7-4. 실제 컴포넌트에서 사용하기

// components/Profile.js
import { useAppContext } from '../context/AppContext';

export default function Profile() {
  const { user, setUser } = useAppContext();

  return (
    <div>
      <p>현재 사용자: {user?.name || '없음'}</p>
      <button onClick={() => setUser({ name: 'H.Y' })}>
        사용자 설정
      </button>
    </div>
  );
}

• 전역으로 공유된 상태값을 읽고 업데이트할 수 있음

7-5. 상태관리 도구 비교 (Context vs Recoil vs Zustand 등)

요약: Context는 간단한 글로벌 상태에 적합.
복잡하거나 많은 상태를 다루는 경우 Recoil, Zustand를 사용하는 것이 더 유리함.

요약

• Context API는 전역 상태 공유를 위한 기본 기능입니다.
• createContext, useContext, useState 조합으로 구성됩니다.
• _app.js에서 Provider를 감싸 모든 페이지에서 사용 가능하게 설정합니다.
• 상태가 커지면 다른 상태 관리 도구로 확장하는 것이 좋습니다.

심화학습

Q1. Context API를 여러 개 분리해서 관리할 수 있을까? 분리 기준은 어떻게 정할까?

A: 분리 가능하며, 상태의 책임이나 관심사가 다를 때 나눕니다. 예: AuthContext, ThemeContext, LangContext 등.

Q2. 로그인 상태를 Context로 관리하면 새로고침 시 정보가 사라지는 문제는 어떻게 해결할까?

A: 상태를 localStorage 또는 cookie에 저장하고, 앱 초기 구동 시 해당 값을 복원하는 로직을 추가해야 합니다.

Q3. Zustand나 Recoil 같은 상태관리 라이브러리는 Context API보다 어떤 점에서 더 유리할까?

A: 더 적은 코드로 복잡한 상태를 관리할 수 있고, 성능 최적화(불필요한 리렌더링 방지) 기능도 내장되어 있어 규모가 큰 앱에 더 적합합니다.