11 Context API로 상태 관리하기: Props Drilling 문제 해결 및 전역 상태 공유 방법

 

1. Props Drilling 문제란?

React에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다. 하지만 컴포넌트의 깊이가 깊어질수록 props를 여러 단계에 걸쳐 전달해야 하는 문제가 발생하는데, 이를 Props Drilling 문제라고 합니다.

가. Props Drilling 문제 예제

import React, { useState } from "react";

function Parent() {
  const [user, setUser] = useState("홍길동");
  return <Child user={user} />;
}

function Child({ user }) {
  return <GrandChild user={user} />;
}

function GrandChild({ user }) {
  return <p>사용자 이름: {user}</p>;
}

export default Parent;

위 예제에서는 user 상태를 Parent 컴포넌트에서 생성했지만 GrandChild까지 전달하려면 Child를 거쳐야 합니다. 이런 방식은 컴포넌트 구조가 복잡해질수록 유지보수가 어려워지는 단점이 있습니다.

2. Context API를 활용한 전역 상태 공유

Context API를 사용하면 props를 단계별로 전달하지 않고도 원하는 컴포넌트에서 직접 접근할 수 있습니다.

나. Context API 기본 구조

import React, { createContext, useContext, useState } from "react";

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

function App() {
  const [user, setUser] = useState("홍길동");
  return (
    <UserContext.Provider value={user}>
      <Child />
    </UserContext.Provider>
  );
}

function Child() {
  return <GrandChild />;
}

function GrandChild() {
  // 2. Context 사용
  const user = useContext(UserContext);
  return <p>사용자 이름: {user}</p>;
}

export default App;

다. Context API를 사용한 전역 상태 관리

위 코드에서는 UserContext를 생성한 후 UserContext.Provider를 통해 전역 상태를 공급합니다. 그리고 useContext(UserContext)를 사용하여 필요한 곳에서 상태를 직접 가져올 수 있습니다. 이를 통해 props를 여러 단계에 걸쳐 전달하지 않고도 데이터를 공유할 수 있습니다.

3. Context API와 Redux 비교

비교 항목Context APIRedux

사용 목적	전역 상태 공유	상태 관리 및 상태 변경 로직 분리
상태 업데이트	useState와 함께 사용	Reducer를 통해 변경
복잡성	간단함	설정이 필요함
성능	가벼움	중간 크기의 프로젝트에 적합

Context API는 간단한 전역 상태 공유에 적합하며, Redux는 상태 변화가 빈번한 대규모 애플리케이션에서 유용합니다.

4. 정리

Props Drilling 문제는 props를 깊게 전달해야 하는 경우 발생하며, 이를 해결하기 위해 Context API를 활용할 수 있습니다. useContext를 사용하면 원하는 컴포넌트에서 직접 전역 상태를 가져올 수 있어 코드가 간결해지고 유지보수가 쉬워집니다.

Context API는 비교적 간단한 프로젝트에서 전역 상태를 관리하는 데 적합하며, 프로젝트의 규모가 커질 경우 Redux 같은 상태 관리 라이브러리와 함께 사용하는 것이 좋습니다. 프로젝트의 복잡도에 맞는 적절한 상태 관리 방법을 선택하는 것이 중요합니다.