[프론트엔드] REACT Context API [4]

이전 글

• 2022.03.31 - [프론트엔드] - [프론트엔드] REACT Context API [3]

 

동적 Content 적용

 

content의 value에는 상태 값이 아닌 함수를 전달하는 것도 가능하다.

기존에 작성한 ColorContext의 코드를 다음과 같이 작성해보자.

 

- color.js

 

import { createContext, useState } from 'react'

const ColorContext = ({
    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>
    );
};

- App.js

 

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

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

export default App;

 

- ColorBox.js

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

// Consumer 컴포넌트를 통해 색상 조회
const ColorBox = () => {
  return (
    <ColorConsumer>
      {({ state }) => (
        <>
          <div
            style={{
              width: "64px",
              height: "64px",
              background: state.color,
            }}
          />
          <div
            style={{
              width: "32px",
              height: "32px",
              background: state.subcolor,
            }}
          />
        </>
      )}
    </ColorConsumer>
  );
};

export default ColorBox;

 

화면 결과