[React] 컬러 피커(color-picker) 사용하기

이번 프로젝트에서 react의 color picker를 사용하는데 색상을 선택하는 부분의 사이즈 조절이 가능한지 알아보기 위해 여러 라이브러리를 찾아보면서 정리한 글이다.

 

내가 생각하기에는 "컬러 피커"의 기능적인 측면에서는 사용자가 여러 색깔 코드 중에 원하는 색상을 선택하는 기능만 있으면 되기 때문에, 이러한 관점에서 보았을 때 많은 라이브러리가 비슷한 기능을 제공할 것 같았다. 

 

그렇기 때문에 먼저, 컬러 피커 관련 라이브러리들을 모아 그 사이에서 사용 수와 최근 업데이트 날짜를 비교해보고, 어떤 라이브러리가 대표적인 라이브러리인지 먼저 보았고, 그 후에 유저가 원하는 커스터마이제이션이 얼마나 가능한지를 보았다.

내가 조사한 관련 라이브러리들은 다음과 같았다.

• react-color
• react-color-palette
• react-color-picker
• react-colorful
• react-input-color

 

이 부분은 npm Trends 사이트를 통해 쉽게 비교가 가능하다.

 

위 사진을 보면 약간 압도적으로 react-colorful이 제일 많이 사용되고, 그 뒤로 react-color, react-color-palette, react-input-color, react-color-picker 순으로 사용되었다. 

 

다음으로 업데이트 날짜를 보면

react-color-palette -> react-colorful, react-input-color -> react-color -> react-color-picker 순으로 아래와 같이 유지 및 업데이트가 이루어짐을 알 수 있다. 

 

위 두 개의 기준읉 통해 보았을 때, 주 라이브러리는 react-color, react-color-palette, react-colorful 으로 정해보았다.

 

하나씩 라이브러리를 보면서 분석해보자!! 😎

 

 

 

1. react-color

1) 설치하기

npm install react-color

 

2) 사용하기

react-color의 경우 신기한 점이 굉장히 다양한 유형의 컬러 피커 디자인을 지원한다.

디자인을 자세히 보려면 공식 홈페이지 참조! 👉 https://casesandberg.github.io/react-color/

 

여기서 원하는 디자인의 컴포넌트를 import해서 원하는 곳에 삽입만 하면 된다.

import React from "react";
import { SketchPicker } from "react-color";

function App() {

  return (
    <div style={{display: "flex", gap: 20, marginTop: 100, marginLeft: 100}}>
      <div>
        <SketchPicker/>
      </div>
      <div style={{width: 30, height: 30}} />
    </div>
  );
}

export default App;

 

사용방법이 굉장히 간단쓰~ 하다!!!

 

커스텀을 도전해보았지만,, width만 바꿀 수 있다. height 조정은 불가능한 것을 알았다.

import React, { useState}  from "react";
import { SketchPicker } from "react-color";
import './App.css';

function App() {

  const [color, setColor] = useState("#ffffff");

  const handleChangeColor = (selectedColor) => {
    setColor(selectedColor.hex);
  }

  return (
    <div style={{display: "flex", gap: 20, marginTop: 100, marginLeft: 100}}>
        <SketchPicker
          color={color}
          onChangeComplete={handleChangeColor}
          width="300px"
        />
      <div style={{width: 30, height: 30}} />
    </div>
  );
}

 

 

컴포넌트에 공통적으로 내려주는 props에는 무엇이 있을까?

 

1. color

• 색상 선택기에서 활성화된 색상
• 다양한 색상의 형태 사용이 가능하다.
  • hex : "#ffffff" 
  • rgb: {r: 51, g: 51, b: 51}
  • hsl: { h:0, s:0, l:10}
  • 알파 값

2. onChange

• 색상이 변경될 때마다 호출되는 함수
• 드래그 이벤트에서 호출이 발생한다
• 그렇기 때문에 만약 자주 발생하지 않고 한 번만 색상을 얻고 싶다면 onChangeComplete를 사용한다.

handleChange(color, event) {
    // color = {
    //   hex: '#333',
    //   rgb: {
    //     r: 51,
    //     g: 51,
    //     b: 51,
    //     a: 1,
    //   },
    //   hsl: {
    //     h: 0,
    //     s: 0,
    //     l: .20,
    //     a: 1,
    //   },
    // }
  }
  
  return(
  	<SwatchesPicker
    	onChange={handleChange}
        >
        </SwatchesPicker>
  )

 

 

3. onChangeComplete

• 색상 변경이 완료되면 호출할 함수

 

이외에도 추가적인 props 는 컴포넌트마다 디자인이 다르기 때문에 사용하려는 컬러 피커에 사용되는 props가 무엇이 있는지 보려면 공식 홈페이지를 참고!! 

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

 

 

언제 쓰는 것이 좋을까?

(잇츠 저의 생각)

- 조금 다양한 디자인의 컬러 피커를 보고 선택하고 싶을 때 사용하면 좋을 것 같다.

- 컬러 피커에 입력되는 색상이나, 리턴되야하는 색상이 여러 형태일 경우 사용하면 좋을 것 같다.

 

 

2. react-colorful

1) 설치하기

npm i react-colorful

 

2) 사용하기

 

이것도 굉장히 사용법이 간단하다. 공식 홈페이지를 보면 사용 가능한 피커 모델들을 볼 수 있다.

여기서 원하는 모델을 import 하여 사용해주기만 하면 된다!

 

 

컴포넌트 간의 차이

각각 컴포넌트를 적용해보면 어떤 디자인이 나올지 궁금해서 하나하나 적용해보았다. 

<HexColorPicker>	<HexAlphaColorPicker>
<RgbColorPicker>	<RgbaColorPicker>
<RgbStringColorPicker>	<RabaStringColorPicker>
<HslColorPicker>	<HslaColorPicker>

                           

적용을 해보았다. 위의 사진들로부터 볼 수 있듯이 react-color와는 달리 여러 디자인별로 컴포넌트가 나뉜 것이 아니었다. 이 여러 개의 컴포넌트의 차이점은 컴포넌트를  사용할 때 알 수 있었다. 

 

아래는 HsvaColorPicker 컴포넌트를 사용하여 onChange prop으로는 color의 setter 함수를 넣고, 변할 때마다 color의 상태 값이 변하도록 하였고, color picker의 옆에 div를 임의로 만들어 선택된 컬러의 값을 background-color로 넣어주었다.

import React, { useState}  from "react";
import * as ColorPicker from "react-colorful";
import './App.css';

function App() {

  const [color, setColor] = useState({ h: 0, s: 0, l: 100, a: 1 }); //초기값

  return (
    <div style={{display: "flex", gap: 20, marginTop: 100, marginLeft: 100}}>
      <div>
        <ColorPicker.HslaColorPicker 
          color={color}
          onChange={setColor}
        />
      </div>
      <div style={{width: 30, height: 30, backgroundColor: `hsl(${color.h}, ${color.s}%, ${color.l}%, ${color.a})`}} />
    </div>
  );
}

export default App;

 

색상이 리턴되는 형태별로 컴포넌트가 나뉜 것 같았다. 즉, 컴포넌트로부터 선택한 컬러 값을 사용할 때, 선택된 컬러의 리턴되는 값의 형태가 각 컴포넌트마다 다르다.

 

- HexColorPicker의 경우 컬러값은 "#ffffff" 같이 색상 코드의 값 자체가 리턴된다.

- RgbColorPicker는 { r: 255, g: 255, b: 255 } 같이 r,g,b 값이 각각 객체의 형태로 리턴된다.

- RgbStringPicker는 "rgb(255, 255, 255)" 같이 rgb로 묶인 형태로 컬러의 값이 리턴된다.

 

 

커스터마이제이션

컬러 피커를 만약 커스텀 하고 싶다면, 원하는 컬러 피커를 삽입할 때, div로 감싼 후에 안에 삽입한 후, 원하는 클래스명을 지정해주어야한다.

<div className="colorPicker">
  <ColorPicker.HslaColorPicker 
   color={color}
   onChange={setColor}
  />
</div>

 

난 이것도 모르고 컬러 피커 자체에 커스텀해서 시간을 낭비했다,,호홍,,

꼭 div 안에 넣자!

 

react-colorful 의 컬러피커의 경우 파트별로 나뉘어져있고, 파트별로 정해진 클래스명을 통해 부분별 커스텀이 가능하다. 

 

어떻게 나뉘어지고, 각 파트를 커스텀하는 클래스명이 무엇인지 보자!

 

 

1. 컬러 피커 자체의 크기를 변경하고 싶다면?

.클래스명 .react-colorful {
	width: 200px;
  	height: 200px;
}

 

 

2. saturation

.클래스명 .react-colorful__saturation {
  border-radius: 50px 50px 0 0;
}

 

3. hue

.클래스명 .react-colorful__hue {
  height: 20px;
  border-radius: 50px;
}

 

4. hue-pointer

.클래스명 .react-colorful__hue-pointer {
  width: 20px;
  height: inherit;
  border-radius: 20px;
  border-color: black;
}

 

언제 쓰는 것이 좋을까?

(잇츠 저의 생각)

• react-colorful의 경우 react-color보다 가벼운 라이브러리라고 한다. 만약 들어오거나 반환해야할 컬러 값이 일관된 형태의 값일 경우 react-color보다는 이 라이브러리를 사용하는 것이 좋을 것 같다. 
• 부분별로 커스텀이 가능하기 때문에 색상 조절 부분이나 조금 더 세부적으로 커스텀하고 싶은 경우 사용하는 것이 좋을 것 같다.

 

 

 

 

 

 

 

참고자료

react-colorful

https://www.npmjs.com/package/react-colorful

https://velog.io/@psst54/react-colorful-%EB%9C%AF%EC%96%B4%EB%B3%B4%EA%B8%B0

 

react-color

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