ContextAPI

리액트를 다루는 기술 15장

 

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

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

context 사용 시점

- 전역적인 데이터 공유
- 로그인한 유저, 테마, 선호하는 언어 등
- context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 써야한다.

 

React.createContext

const MyContext = React.createContext(/*defaultValue*/{color: 'black'});

• 새 컨텍스트를 만들 때는 creactContext함수를 사용하고, 함수의 파라미터로 해당 Context의 기본상태를 지정한다.
• Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽는다.
• defaultValue 매개변수는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값이다.

 

Context.Consumer

<MyContext.Consumer>
  {value => /* context 값을 이용한 렌더링 */             
             <div>{value.color}</div>                            
  }
</MyContext.Consumer>

•  context 변화를 구독하는 React 컴포넌트로, 이 컴포넌트를 사용하면 함수 컴포넌트 안에서 context를 구독할 수 있다.
• Consumer안의 함수는 context의 현재값을 받아 React노트를 반환한다.
• Provider가 없다면 createContext 생성시 매개변수 defaultValue를 매개변수로 받는다.

 

Context.Provider

<MyContext.Provider value={/*어떤 값*/{color:'red'}}>

• context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.
• Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링된다.

 

 

 

createContext - color.js 

import { createContext } from 'react';

const ColorContext = createContext({ color: 'black' });

export default ColorContext;

 

Consumer - colorBox.js (Render Props)

import React from 'react';
import ColorContext from '../contexts/color';

const ColorBox = () => {
  return (
    <ColorContext.Consumer>

    {//Render Props - 컴포넌트의 children이 있어야 할 자리에 함수 전달
    (value) => (
        <div>
          style=
          {{
            width: '64px',
            height: '64px',
            background: value.color,
          }}
        </div>
      )}
    </ColorContext.Consumer>
  );
};

export default ColorBox;

• ColorContext안의 Consumer는  context 현재값 받아 함수 전달- Render Props 
• Render Props 패턴 대신에 useContext  Hook 사용할 수 있다.
  

Consumer - colorBox.js(useContext))

import React, {useContext} from 'react';
import ColorContext from '../contexts/color';

const ColorBox = () => {
  const value = useContext(ColorContext);
  return (
        <div>
          style=
          {{
            width: '64px',
            height: '64px',
            background: value.color,
          }}
        </div>
    );
};

export default ColorBox;

단 useContext는 클래스형 컴포넌트에는 사용할 수 없다. 함수형 컴포넌트에만 사용가능하다.

 

Provider - App.js

import React from 'react';
import ColorBox from './components/ColorBox';
import ColorContext from './contexts/color';

const App = (props) => {
  return (
    <ColorContext.Provider value={{ color: 'red' }}>
      <div>
        <ColorBox />
      </div>
    </ColorContext.Provider>
  );
};

export default App;