라이브러리 없이 세련된 컬러 피커를 구현하는 【React】

소개

결론

구현 예

const Color: React.VFC = () => {
  const [color, setColor] = useState<string>("#000000");

  return (
        <div
          className="w-8 h-8 rounded-full border border-gray-400"
          style={{ background: color }}
        >
          <input
            type="color"
            value={color}
            onChange={(e) => {
              setColor(e.target.value);
            }}
            className="w-full h-full opacity-0"
          />
        </div>
  );
};