7강. useContext로 전역 상태 관리

1. useContext로 전역 상태 관리

1.1. Context가 필요한 이유

Props를 여러 단계로 전달하는 것은 번거롭다. Context를 사용하면 전역적으로 데이터를 공유할 수 있다.

1.1.1. Props 전달의 문제점 (Prop Drilling)

// user를 Profile까지 보내려면 모든 중간 컴포넌트를 거쳐야 함
function App() {
  const [user, setUser] = useState('김철수');
  return <Page user={user} />;
}

function Page({ user }) {
  return <Header user={user} />;
}

function Header({ user }) {
  return <Profile user={user} />;
}

function Profile({ user }) {
  return <div>{user}</div>;
}

1.2. Context 기본 사용법

1.2.1. 1단계: Context 생성

import { createContext } from 'react';

const UserContext = createContext();

1.2.2. 2단계: Provider로 값 제공

function App() {
  const [user, setUser] = useState('김철수');

  return (
    <UserContext.Provider value={user}>
      <Page />
    </UserContext.Provider>
  );
}

1.2.3. 3단계: useContext로 값 사용

import { useContext } from 'react';

function Profile() {
  const user = useContext(UserContext);
  return <div>사용자: {user}</div>;
}

1.3. 완전한 예제

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

// Context 생성
const UserContext = createContext();

function App() {
  const [user, setUser] = useState('김철수');

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

function Page() {
  return (
    <div>
      <h1>페이지</h1>
      <Profile />
    </div>
  );
}

function Profile() {
  const { user, setUser } = useContext(UserContext);
  return (
    <div>
      <p>사용자: {user}</p>
      <button onClick={() => setUser('이영희')}>이름 변경</button>
    </div>
  );
}

1.4. 정리

useContext는 데이터를 멀리 있는 컴포넌트까지 한 번에 전달할 때 사용한다
createContext()로 Context를 생성한다
Provider 컴포넌트로 하위 컴포넌트들에게 값을 전달한다
useContext(Context)로 전달된 값을 가져와 사용한다
테마(Dark/Light), 로그인 정보, 다국어 설정 등에 주로 사용된다