Context

Context란?

많은 컴포넌트에서 사용하는 데이터를 반복적인 prop전달(prop Drilling)없이 공유

provider 안의 컴포넌트 어디서든 props를 거치지 않고 데이터를 자유롭게 사용가능.

Context 만들기

Context는 createContext 라는 함수를 통해 만들 수 있습니다.

import { createContext } from 'react';

const LocaleContext = createContext();

참고로 이때 아래처럼 기본값을 넣어줄 수도 있어요.

import { createContext } from 'react';

const LocaleContext = createContext('ko');

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 값 사용하기

useContext 라는 Hook을 사용하면 값을 가져와 사용할 수 있습니다.

이때 아규먼트로는 사용할 Context를 넘겨주면 됩니다.

import { createContext, useContext } from 'react';

const LocaleContext = createContext('ko');

function Board() {
  const locale = useContext(LocaleContext);
  return <div>언어: {locale}</div>;
}

function App() {
  return (
    <div>
       <LocaleContext.Provider value="en">
          <Board />
       </LocaleContext.Provider>
    </div>
  );
}

⭐ State, Hook와 함께 활용하기

Provider 역할을 하는 컴포넌트를 하나 만들고,

여기서 State를 만들어서 value 로 넘겨줄 수 있습니다.

그리고 아래의 useLocale 같이

useContext 를 사용해서 값을 가져오는 커스텀 Hook을 만들 수도 있겠죠.

이렇게 하면 Context에서 사용하는 State 값은

반드시 우리가 만든 함수를 통해서만 쓸 수 있기 때문에

안전한 코드를 작성하는데 도움이 됩니다.

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

const LocaleContext = createContext({});

export function LocaleProvider({ children }) {
  const [locale, setLocale] = useState();
  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      {children}
    </LocaleContext.Provider>
  );
}

export function useLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('반드시 LocaleProvider 안에서 사용해야 합니다');
  }

  const { locale } = context;
  return locale;
}

export function useSetLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('반드시 LocaleProvider 안에서 사용해야 합니다');
  }

  const { setLocale } = context;
  return setLocale;
}