[React] Kendo-React ColorPicker 사용하기

🌻 Intro

사용자가 원하는 색상을 선택해서 적용시키는 기능을 개발해야 해서 kendo-react 에서 제공하는 ColorPicker 컴포넌트를 사용해보았다.🙃

🌻 내용

Kendo 의 ColorPicker 는 색상의 value 값을 가져올 때 기본적으로 RGBA 형식을 지원한다. 그런데 나의 경우에는 HEX 값으로 DB에 데이터를 저장해야 해서 rgba 를 hex 값으로 변환하는 작업을 추가해주었다.

[ColorPicker 인터페이스]

[소스코드]

const ColorPicker = (props) => {

// value값으로 전달받은 rgba -> hex로 변환
const rgbaToHex = (rgba) => {
    const values = rgba
        .replace(/rgba?\(/, '')
        .replace(/\)/, '')
        .replace(/[\s+]/g, '')
        .split(',');

    const a = parseFloat(values[3] || 1),
        r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
        g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
        b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);

    return "#" +
        ("0" + r.toString(16)).slice(-2) +
        ("0" + g.toString(16)).slice(-2) +
        ("0" + b.toString(16)).slice(-2);
}

// Colorpicker onChange 이벤트 핸들러
const onChangeHandler = useCallback((name, event) => {
      let value = event.value;		
      switch (name) {
          case "color":
              value = (value != null ? rgbaToHex(value) : "")
              break;
          default:
              break;
      }
    }, []);

return(
    <Fragment>
	    <div>
        <ColorPicker
            view={"gradient"}
            onChange={event => onChangeHandler("color", event)}
        />
      </div>
    </Fragment>
	);

};

🥕 결과

[화면]

화면에서 색상을 선택하면 rgba 값을 hex 값으로 변환해주는 것을 확인할 수 있다.

[콘솔]

🍕 ColorPicker view 형태는 ColorPickerView에서 3가지 형태를 지원하기도 해서 원하는 뷰를 선택해서 UI를 변경할 수 있다.
export declare type* ColorPickerView = 'gradient' | 'palette' | 'combo';

	gradient	palette	combo
MODE

---

Reference

• https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/
• https://www.codegrepper.com/code-examples/javascript/rgba+to+hex