React(64) React-color 컬러피커 라이브러리 사용하기

 

 

원하는 색상을 고를 수 있는 컬러피커 라이브러리를 사용해보자

React-color 라는 라이브러리를 발견하였다. 커스텀이 가능하여 추후에도 사용성이 높을 것 같아서 선택을 하였다.

설치 및 셋업 방법은 아래의 공식문서를 참고해보자

React Color

 

 

결과화면 미리보기 

나의 경우 컬러 피커에서 컬러를 선택하면 input 창에서 선택한 Hex 값을 받아오는 기능을 구현하는 중이었다.

그 기능의 셋업을 위해 우선 컬러 파레트를 선택했을 때,

컬러피커 하단의 내장된 인풋으로 Hex 값이 텍스트로 들어오는 기초적인 셋업을 구현한 내용을 담고 있다.

 

---

React(64) React-color 컬러피커 라이브러리 사용하기

 

구조는 간단하다. React-color 컬러피커는 여러 디자인이 있다.

그중에 나는 ChromePicker 라는 녀석을 임포트해왔다.

import { ChromePicker } from 'react-color';

 

Hexa 값을 받을 상태변수를 만들어주자

const [color, setColor] = useState<string>('');

 

useEffect 로 color 라는 변수의 초기값을 세팅해주자. (단 label 이라는 데이터가 변경될 때마다 렌더를 새로 하게 된다.)

useEffect(() => {
    if (!label.color) { 	// 받아온 레이블 컬러가 없으면
      setColor('');		// 걍 빈칸
    }
    setColor(label.color);	// 데이터가 있으면 컬러로 세팅
}, [label]);

 

이번에는 onChange 함수이다. 컬러피커 컴포넌트에서 일어나는 변화들을 catch-up 하는 역할을 한다.

(사실 이 함수를 사용하지 않고 바로 setColor 를 해줘도 되는데 굳이 어미 함수를 하나 더 만든 이유는 onChange 시에 다른 액션들이 추가될 것이기 때문이다.)

  const handleColorChange = useCallback( // 온체인지 이벤트를 담당할 함수다.
    (color: string) => {		 // 바뀌는 컬러값을 매개변수로 받아서
      setColor(color);			 // setColor 안에 넣어줘서 color 를 변경해줄거다.
  }, [color])				 // 단 컬러 데이터가 바뀔때마다 이 함수는 갱신된다.

 

드디어 컬러피커 컴포넌트 등판!

아까 위에서 만든 color 변수를 여기에 잘 넣어주고 함수도 잘 넣어주자

<input
  value={color}
  onChange={e => handleColorChange(e.target.value)}
/>

<ChromePicker
  color={color}
  onChange={color => handleColorChange(color.hex)}
/>

 

 

결과화면

예상한대로(?) 아주 잘된다!  <input> 창에도 잘 들어간다!