[react-color, TypeScript] 컬러 선택 기능 구현하기 (color picker)

react-color 라이브러리를 사용하여 컬러 선택 기능을 제작해보려 한다.

주로 어드인 페이지에서 활용가능한 기능일 것이다.

 

1. react-color 라이브러리에서 ChromePicker를 불러온다.

다양한 형태의 컬러피커를 불러올 수 있다.

ChromePicker가 가장 깔끔하다고 생각하여 이것을 선택했다.

 

불러올 수 있는 컬러피커의 종류는 아래와 같다.

https://casesandberg.github.io/react-color/

 

AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker 

MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker

 

2. react-color에서 ColorResult type을 불러온다.

TypeSciprt에서는 라이브러리로 선택한 컬러의 type을 지정하기 위해 colorResult 타입을 사용한다.

 

3. 팝업창이 열릴 때만 컬러피커를 표시한다.

컬리피커를 계속 화면에 표시하는 것은 미관에 좋지 않다.

팝업창 등을 통해 필요한 경우에만 표시하는 것이 좋다.

라이브러리를 사용하거나 isOpen(boolean Type) state를 통해 필요한 경우에만 컬리피커를 화면에 보여주자.

 

4. 컬러피커에 의해 선택된 색상값은 state로 관리하자.

state를 통해 color를 관리하고 ChromePicker 컴포넌트에 onChange 속성을 사용하여 선택된 색상 값을 저장하면 된다.

 

라이브러이에서 제공하는 color 값은 아래와 같다. color.hex 값을 사용하면 hex 색상 값을 얻을 수 있다.

 

5. 선택된 색상을 화면에 표시할 엘리먼트를 제작하자.

선택된 컬러를 표시할 엘리먼트를 제작하고 인라인 스타일로 color state를 적용하여 선택된 색상을 화면에 보여준다.

 

import { ChromePicker, ColorResult } from "react-color";

export default function ColorPicker() {

  const [color, setColor] = useState<string>("#FFFFFF");

  ...

  return (
    <>
      <div
        {isOpened ?
          <ChromePicker
            onChange={(color: ColorResult) => {
              setColor(color.hex);
            }}
            color={color}
          />
 	  	: null
      </div>
      <div 
        className="color-display"
        style={{ backgroundColor: `${color}` }}
      ></div>
    </>
  );
}

 

// CSS
.color-display {
  width: 60px;
  height: 20px;
}