context API

전역적으로 사용할 데이터가 있을 때 유용한 기능

 

1) context 만들기

createContext함수를 이용해 생성. 인자값으로 기본 상태 지정.

import { createContext } from 'react';

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

export default ColorContext;

 

2) consumer

context를 사용하는 곳. render props 형태로 넘겨야 함

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

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

export default ColorBox;

 

3) provider

context value를 변경할 때 사용

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

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

export default App;