[ React ] Context API

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

 

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러

 

컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단

 

계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.

[ 참고 공식문서 ]

https://ko.reactjs.org/docs/context.html

Context – React

하지만 useContext Hook 이 나오면서 사용방법이 더 편안히 바뀌었다.

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

const Mycontext = createContext('default');

function Child(){
  const text = useContext(Mycontext);
  return <div>{text}</div>
}

function Parent(){
  return <Child />
}

function GrandParent(){
  return <Parent />
}

function ContextSample(){
  return(
    <Mycontext.Provider value="GOOD">
      <GrandParent />
    </Mycontext.Provider>
  );
}

useContext 와 createContext를 이용해서 쉽게 이용가능하다.