[React] context API

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

일반적인 react 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에게 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

 

context를 사용하기 전에 고려할 것

context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것이다. context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 사용해야한다.

여러 레벨에 걸쳐 props 넘기는걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다.

 

context 사용법

context는 리액트 패키지에서 creacteContext라는 함수를 불러와서 만들 수 있다.

import { createContext } from 'react';
const MyContext = createContext();

context객체 안에는 Provider라는 컴포넌트가 들어있다. 그리고 그 컴포넌트간에 공유하고자 하는 값을 value라는 props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근할 수 있다.

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <GrandParent />
    </MyContext.Provider>
  );
}

이렇게 하면 원하는 컴포넌트에서 useContext라는 hook을 사용하여 context에 넣은 값에 바로 접근할 수 있다. 해당 hook인자에는 createContext로 만든 MyContext를 넣는다.

import { createContext, useContext } from 'react';

function Message() {
  const value = useContext(MyContext);
  return <div>Received: {value}</div>;
}

이렇게 하면 여러 컴포넌트를 걸쳐서 전달하던 props drilling 현상이 사라지게 된다.

import { createContext, useContext } from 'react';
const MyContext = createContext();

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <GrandParent />
    </MyContext.Provider>
  );
}

function GrandParent() {
  return <Parent />;
}

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

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

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

function Message() {
  const value = useContext(MyContext);
  return <div>Received: {value}</div>;
}

export default App;

위처럼 props를 일일이 적어주지 않아도 최 하단 컴포넌트까지 props가 잘 전달 된다.

 

 

 

참고: https://velog.io/@velopert/react-context-tutorial

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법