<aside> 💡 Context에 대해서 알아보자

</aside>

Context

한국어로 맥락이라는 뜻을 가지고 있으며, 리액트 개발을 진행하다 보면 여러 데이터를 내려주고 싶을 때가 많다. 이때 컴포넌트의 단계가 많다면 여러 번 반복해서 Prop 을 내려줘야한다.

이런 문제점을 프롭 드를링(Prop Drilling)이라고 한다. Context 는 이 프롭 드릴링을 해결하기 위해 사용하는 기능이다.

Context는 꼭 필요할때만!

• Context 를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다.
• Prop drilling 을 피하기 위한 목적이라면 Component Composition (컴포넌트 합성) 을 먼저 고려해보는게 좋다.

Context 만들기

createContext 라는 react 내장된 함수를 통해 만들 수 있다.

import { createContext } from 'react';

const LocaleContext = createContext();

const LocaleContext = createContext('기본 값'); // 기본 값을 설정할 수도 있다.

Context 적용

Context 를 사용할 떄, 공유할 범위를 정하고 사용해야 하는데. 범위는 Context 객체에 있는 Provider 라는 컴포넌트로 정해줄 수 있다.

Provider 의 value prop으로 공유할 값을 내려주면 된다.

import { createContext } from 'react';

const LocaleContext = createContext('ko');

function App() {
  return (
    <div>
       ... 바깥의 컴포넌트에서는 LocaleContext 사용불가

       <LocaleContext.Provider value="en">
          ... Provider 안의 컴포넌트에서는 LocaleContext 사용가능
       </LocaleContext.Provider>
    </div>
  );
}

Context 값 사용하기