React: Context API

david0218·2021년 9월 14일
0

새싹에 물주기🚿

목록 보기
1/2
post-thumbnail

기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아 와서 사용할수 있다.

Context 값 조회하기

Consumer를 이용

import React from "react";
import { createContext } from "react";

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

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

export default ColorBox;

useContext를 이용

Consumer를 사용하지 않고 Hooks를 사용하여 훨신 편하게 Context 값을 조회할 수 있다.

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

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

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

export default ColorBox;

컴포넌트를 App에서 렌더링하여 사용한다.

import React from "react";
import ColorBox from "./components/ColorBox";

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

export default App;

Context 값 변경하기

Provider를 사용하여 Context의 value를 변경한다.
value를 명시하지 않는다면 오류가 생긴다.

import React from "react";
import ColorBox from "./components/ColorBox";

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

  );
};

export default App;

Provider를 렌더링하는 함수를 만들고 내보내면,

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>
  );
};

export { ColorProvider };

App에서는 이렇게 렌더링할 수 있다.

import React from "react";
import ColorBox, { ColorProvider } from "./components/ColorBox";

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

export default App;

Context 값 업데이트하기

고정적인 값을 사용하는 것이 아니라 useState Hooks와 같이 이용해 State를 업데이트 할 수 있다.

.
..

export 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 { actions } = useContext(ColorContext);로 함수를 가져와서 사용할 수 있다.


코드를 전부다 가져올수도 없고 그렇다고 수정해서 붙이기엔 번거롭고. 정리하는것도 일이다 일.

(제가 이해한대로 적기 때문에 혹시 틀린 부분이 있다면 알려주시면 감사하겠습니다.)

profile
로큰롤처럼 살기 / 블로그이전 : 9yujin.tistory.com

0개의 댓글