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

이전 글

• 2022.04.01 - [프론트엔드/React] - [프론트엔드] REACT Context API [4]

 

색상 선택 컴포넌트 만들기

 

이번에는 Context의 actions에 넣어준 함수를 호출 컴포넌트를 제작 할 예정이다.

 

components. 디렉터리에 SelectColors.js 파일을 생성하여 아래의 코드를 작성한다.

 

 

-  SelectColors.js

 

import React from "react";

const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

const SelectColors = () => {
  return (
    <div>
      <h2>색상을 선택하세요.</h2>
      <div
        style={{
          display: "flex",
        }}
      >
        {colors.map((color) => (
          <div
            key={color}
            style={{
              background: color,
              width: "24px",
              height: "24px",
              cursor: "pointer",
            }}
          />
        ))}
      </div>
      <hr />
    </div>
  );
};

export default SelectColors;

- App.js

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

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

export default App;

 

 

화면 결과