Prop Drilling과 Contect API

Prop Drilling

1. Prop Drilling

• PropDrilling이란? 컴포넌트 간에 데이터를 전달할 때, 발생할 수 있는 패턴을 뜻합니다.
• 이는 상위 컴포넌트에서 데이터(상태)를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주게 됩니다.
• 중간 컴포넌트 입장에서는 타겟 자식 컴포넌트에게 데이터를 전달해주기 위해 사용하지 않는 프로퍼티를 받게 됩니다.
• 여러 개의 컴포넌트를 거쳐야 한다면, 가장 먼저 Props가 어디서 온 것인지 추적하기 어려워 유지보수에 비효율적입니다.

2. Context API

• Context API는 React에서 데이터를 전역으로 공유하기 위해 사용하며, 주로 Props Drilling 문제를 해결하기 위해 사용합니다.
• Context API의 주요 구성 요소와 작동 방식은 다음과 같습니다.

 1) createContext 함수

• createContext 함수를 사용하여, 새로운 컨텍스트 객체를 생성합니다.
• 이 함수는 컨텍스트객체와 그 객체의 Provider 컴포넌트 및 Consumer 컴포넌트를 반환합니다.
• 다음 예시와 같이 사용할 수 있습니다.
  • 여기서 value는 컨텍스트의 기본 값으로 사용될 값입니다. 컴포넌트 트리에서 해당 컨텍스트의 Provider가 제공되지 않았을 때, 사용됩니다. 

const MyContext = React.createContext(value);

 

 2) Provider 컴포넌트

• Provider 컴포넌트는 컨텍스트의 값을 제공하는 역할을 합니다.
• 컨텍스트 값을 업데이트하고 하위 컴포넌트에 제공할 수 있습니다.
• 다음 예시와 같이 사용할 수 있습니다.
  • 여기서 value는 제공할 컨텍스트 값입니다. 이 값은 Provider에 속한 모든 하위 컴포넌트에서 접근할 수 있습니다.

<MyContext.Provider value={/* value */}>
  {/* 하위 컴포넌트 */}
</MyContext.Provider>

 

 3) Consumer 컴포넌트

• Consumer 컴포넌트를 사용하여, 컨텍스트 값을 소비할 수 있습니다.
• Consumer 컴포넌트는 함수 or 클래스 컴포넌트 내에서 사용될 수 있습니다.
• 다음 예시와 같이 사용할 수 있습니다.
  • 여기서 value는 Provider에 제공된 컨텍스트 값입니다. Consumer 컴포넌트 내에서 이 값을 사용하여, UI를 렌더링 할 수 있습니다.

<MyContext.Consumer>
  {value => /* 컨텍스트 값(value)을 사용한 렌더링 */}
</MyContext.Consumer>

 

3. 정리하며

• 지금까지 Props Drilling과 Context API에 대해 알아보았습니다.
• Context API를 사용하면, 전역 상태를 관리하고 다양한 컴포넌트 간에 데이터를 전달할 수 있습니다.
• 또한, 이를 활용해 Props Drilling 패턴을 피하고 컴포넌트 계층 구조를 더 깔끔하게 유지할 수 있습니다.