Custom Hook을 활용한 색상 선택 기능 구현

06 Nov 2023

reactjs

React에서 Custom Hook을 활용하면 중복되는 로직을 재사용할 수 있습니다. 이번 포스트에서는 Custom Hook을 사용하여 간단한 색상 선택 기능을 구현하는 방법을 알아보겠습니다.

Custom Hook 생성하기

먼저, ColorPicker 컴포넌트에서 사용할 Custom Hook을 생성해야 합니다. 다음과 같이 코드를 작성해보세요.

import { useState } from 'react';

const useColorPicker = (initialColor) => {
  const [color, setColor] = useState(initialColor);
  
  const handleChangeColor = (newColor) => {
    setColor(newColor);
  }
  
  return [color, handleChangeColor];
}

export default useColorPicker;

위 코드에서, useState를 통해 color 상태와 setColor 함수를 정의하고, handleChangeColor 함수를 통해 color 값을 업데이트합니다. 이렇게 생성한 Custom Hook은 색상 선택 기능을 제공할 것입니다.

ColorPicker 컴포넌트 만들기

이제 Custom Hook을 사용하여 ColorPicker 컴포넌트를 만들어봅시다.

import React from 'react';
import useColorPicker from './useColorPicker';

const ColorPicker = () => {
  const [color, handleChangeColor] = useColorPicker('#FFFFFF');
  
  const handleColorChange = (e) => {
    handleChangeColor(e.target.value);
  }
  
  return (
    <div>
      <input  
        type="color"
        value={color}
        onChange={handleColorChange}
      />
      <div 
        style={{
          backgroundColor: color,
          width: '200px',
          height: '200px',
          marginTop: '16px',
        }}
      />
    </div>
  );
}

export default ColorPicker;

위의 코드에서는 useColorPicker Hook을 사용하여 초기 색상 값 ‘#FFFFFF’을 설정하고, input 요소의 변화에 따라 handleColorChange 함수를 통해 색상을 업데이트합니다. 업데이트된 색상 값은 div 요소의 배경색으로 반영됩니다.

ColorPicker 컴포넌트 사용하기

이제 ColorPicker 컴포넌트를 사용하여 색상 선택 기능을 화면에 렌더링해보겠습니다.

import React from 'react';
import ColorPicker from './ColorPicker';

const App = () => {
  return (
    <div>
      <h1>색상 선택</h1>
      <ColorPicker />
    </div>
  );
}

export default App;

위 코드에서는 App 컴포넌트에서 ColorPicker 컴포넌트를 불러와 화면에 렌더링합니다.

마무리

위의 예제를 통해 Custom Hook을 활용하여 간단한 색상 선택 기능을 구현하는 방법을 알아보았습니다. Custom Hook을 잘 활용하면 코드의 재사용성을 높이고, 중복된 로직을 효율적으로 관리할 수 있습니다.

더 많은 Custom Hook 예제와 활용 방법을 알아보려면 공식 React 문서를 확인해보세요.

#react #custom-hook