(React) useContext

useContext 는 여러층의 컴포넌트를 호출할 필요가 있지만 호출측의 데이터를 특정한 컴포넌트만에서 사용할 필요가 있을시 사용.

(props를 쓰는 방법도 있지만 중간 계층의 콤포넌트들은 사용하지 않고 전달만 하는 측면에서 비효율적임)

1. 사용방법

    1.1 context 생성

// context.js import { createContext } from 'react'; export const Context = createContext('Default Value');

 

   1.2 context 제공
        호출컴포넌트를 <Context.Provider> </Context.Provider> 로 감싸고 value 를 전달

import { Context } from './context'; function Main() {   const value = 'My Context Value';   return (     <Context.Provider value={value}>           <MyComponent />     </Context.Provider>   ); }

 

  1.3 context 를 소비

     방법1) useContext(Context) 를 호출
                ※ Context 는 맨 위층에서 create 한 context 

import { useContext } from 'react'; import { Context } from './context'; function MyComponent() {      const value = useContext(Context);      return <span>{value}</span>; }

 

    방법2) <Context.Consumer> </ Context.Consumer>

import { Context } from './context'; function MyComponent() {      return (             <Context.Consumer>                    {value => <span>{value}</span>}            </Context.Consumer>   ); }

  ※ 위 샘플에서는 한단계의 콤포넌트를 사용했지만 깊은 단계의 컴포넌트에 적용가능하다.