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

이전 글

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

 

색상 선택 컴포넌트 선택하여 적용하기

 

이번에는 SetColors에서 마우스 왼쪽 버튼을 클릭하면 큰 사각형 색상을 변경하고, 오른쪽 버튼을 클릭하면 작은 정사각형 색상을 변경하도록 구현 해보겠다.

 

 

-  SelectColors.js

마우스 왼쪽 버튼은 onClick 이벤트로 구현하고

마우스 오른쪽 버튼은 onContextMenu 이벤트로 구현하다.

 

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

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

const SelectColors = () => {
  return (
    <div>
      <h2>색상을 선택하세요.</h2>
      <ColorConsumer>
        {({ actions }) => (
          <div
            style={{
              display: "flex",
            }}
          >
            {colors.map((color) => (
              <div
                key={color}
                style={{
                  background: color,
                  width: "24px",
                  height: "24px",
                  cursor: "pointer",
                }}
                onClick={() => actions.setColor(color)}
                onContextMenu={(e) => {
                  e.preventDefault(); // 이벤트 동작 방지.
                  actions.setSubcolor(color);
                }}
              />
            ))}
          </div>
        )}
      </ColorConsumer>
      <hr />
    </div>
  );
};

export default SelectColors;

 

화면 결과

마우스 왼쪽 버튼을 클릭하면 큰 사각형 색상이 변경되고,

오른쪽 버튼을 클릭하면 작은 사각형 색상이 변경될 것이다.

 

프로젝트를 실행하여 결과를 확인해보자.