Context API - (2)

이번에는 동적 Context를 사용하는 방법에 대해서 알아본다!

이전에 만들었던 ColorContext 컴포넌트를 수정한다.

동적 Context

import { createContext, useState } from "react";

const ColorContext = createContext({
  	state: { color: 'black', subcolor: 'red' },
  	actions: {
      setColor: () => {},
      setSubcolor: () => {},
    }
});

const colorProvider = ({ children }) => {
  	const [color, setColor] = useState('black');
  	const [subcolor, setSubcolor] = useState('red');
  	
  	const value = {
      state: { color, subcolor },
      actions: { setColor, setSubcolor },
    };
  	return (
      <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
    );
};

const { Consumer: ColorConsumer } = ColorContext;

export { ColorProvider, ColorConsumer };
export default ColorContext;

기존에는 ColorContext를 사용해서 Provider 컴포넌트를 직접 사용하는 방식이었다면 이번에는 ColorProvider라는 컴포넌트를 만들어서 ColorContext의 Provider를 렌더링 하는 방식으로 수정한다.
추가적으로 createContext의 기본값은 실제 Provider의 value에 넣는 객체의 형태와 일치시켜주는 것이 좋다

수정한 Provider를 사용해서 App.js 파일도 수정한다.

import ColorBox from "./components/ColorBox";
import { ColorProvider } from "./contexts/color";

const App = () => {
  return (
    <ColorProvider>
      <div>
        <ColorBox />
      </div>
    </ColorProvider>
  );
};
export default App;

ColorProvider의 props인 children이 ColorBox 컴포넌트가 된다. 즉 ColorBox 컴포넌트는 ColorProvider의 value 값을 사용한다.

import { ColorConsumer } from "../contexts/color";

const ColorBox = () => {
  return (
    <ColorConsumer>
      { value => (
        <>
          <div
            style={{
              width: '64px',
              height: '64px',
              background: value.state.color
            }}
          />
          <div
            style={{
              width: '32px',
              height: '32px',
              background: value.state.subcolor
            }}
          />
        </>
      )}
   </ColorConsumer>
  );
};
export default ColorBox;

useContext

리액트에 내장되어 있는 Hooks 중에서 useContext라는 Hook을 사용하면, 함수 컴포넌트에서 Context를 쉽게 사용할 수 있다.

import { useContext } from "react";
import ColorContext from "../contexts/color";

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

기존에는 Consumer 컴포넌트를 사용해서 value를 받아서 표현식을 사용해서 JSX를 만들어야 했다. 하지만 useContext를 사용하면 간단하게 Context의 state 가져올 수 있다!

Hook의 경우 함수형 컴포넌트에서만 사용할 수 있다는 문제가 있다. 따라서 class형 컴포넌트에서는 사용할 수 없고 대신 static contextType을 사용할 수 있다.

물론 class형 컴포넌트를 사용하는 방법도 알고 넘어가야 하지만 여기서는 따로 정리하지는 않는다.