React - Context

Context API란?

Context API는 리액트에서 제공하는 전역 상태 관리 도구다.
트리 구조의 상위 컴포넌트에서 하위 컴포넌트로 props 없이도 상태를 공유할 수 있도록 도와준다.

✅ 대표적인 사용 예시

• 로그인 상태
• 테마 설정 (다크/라이트 모드)
• 다국어 처리
• 사용자 정보 

 

Context API 구성 요소

1. Context 객체 생성
   createContext()를 통해 상태를 공유할 수 있는 context 객체를 만든다.
2. Provider
   상태를 공유할 범위를 설정하고, 실제 데이터를 전달하는 역할을 한다.
   value 속성을 통해 데이터를 하위 컴포넌트에게 공급한다.
3. Consumer
   Context 데이터를 사용하는 쪽이다. useContext 훅을 통해 접근한다.

로그인 상태 관리하기

1. Context 객체 생성

interface IUser {
  name: string;
}

interface UserContextType {
  user: IUser | null;
  setUser: React.Dispatch<React.SetStateAction<IUser | null>>;
}

const UserContext = createContext<UserContextType | undefined>(undefined);

 

• 사용자 정보를 담을 IUser 타입과, 이를 전역으로 관리할 UserContextType 정의
• undefined로 초기화해서 Provider 외부에서 사용할 경우 오류를 낼 수 있도록 방지

2.  Provider 컴포넌트 만들기

const UserProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState<IUser | null>(null);

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

 

 

• useState를 통해 상태를 정의하고, value로 전달
• 이 Provider 내부의 컴포넌트들은 user, setUser를 자유롭게 사용할 수 있다

3. 전역 상태를 사용하는 컴포넌트

로그인 버튼을 보여주는 Header

const ExampleHeader = () => {
  const userContext = useContext(UserContext);
  if (!userContext) throw new Error('UserContext가 UserProvider 내에서 사용되지 않음');

  const { user, setUser } = userContext;

  if (!user) {
    return <button onClick={() => setUser({ name: 'bergerac' })}>로그인</button>
  }

  return (
    <div>
      <h4>프로젝트 헤더</h4>
      <p>{user.name}</p>
    </div>
  );
}

 

 

• 로그인 전엔 버튼, 로그인 후엔 사용자 이름 표시
• 로그인 시 'bergerac'이라는 이름으로 로그인됨

로그아웃 버튼을 보여주는 Navibar

const ExampleNaviBar = () => {
  const userContext = useContext(UserContext);
  if (!userContext) throw new Error('UserContext가 UserProvider 내에서 사용되지 않음');

  const { user, setUser } = userContext;

  return (
    <div>
      Hello, { user ? user.name : '게스트' }
      <button onClick={() => setUser(null)}>로그아웃</button>
    </div>
  );
}

 

• 로그인 여부에 따라 인삿말이 달라지고, 로그아웃 버튼이 항상 보인다

최상단에서 Provider로 감싸기

UserProvider로 감싸지 않으면 useContext에서 오류 발생한다.