이번 포스트에서는 React에서 Custom Hook을 이용하여 슬라이더를 구현하는 방법에 대해 알아보겠습니다.

소개

슬라이더는 사용자가 값을 선택하거나 조정할 수 있는 UI 요소입니다. React에서 슬라이더를 구현하기 위해서는 상태 관리와 이벤트 처리가 필요합니다. Custom Hook은 이러한 로직을 재사용하기 쉽게 추상화하는 데 도움이 됩니다.

Custom Hook 생성

먼저, 슬라이더의 상태를 관리하는 Custom Hook을 생성해보겠습니다. useSlider라는 이름으로 Custom Hook을 만들겠습니다.

import { useState } from 'react';

const useSlider = (initialValue, minValue, maxValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    handleChange,
    minValue,
    maxValue
  };
};

export default useSlider;

위의 코드에서는 useState Hook을 사용하여 value라는 상태와 그 값을 변경하기 위한 handleChange 함수를 생성합니다. 또한, 최소값(minValue)과 최대값(maxValue)도 함께 반환하도록 구현하였습니다.

슬라이더 컴포넌트 구현

이제, 위에서 생성한 Custom Hook을 사용하여 슬라이더 컴포넌트를 구현해보겠습니다. Slider라는 이름의 함수형 컴포넌트를 만들어 Custom Hook을 호출하여 상태를 관리합니다.

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

const Slider = () => {
  const { value, handleChange, minValue, maxValue } = useSlider(50, 0, 100);

  return (
    <div>
      <input
        type="range"
        value={value}
        min={minValue}
        max={maxValue}
        onChange={handleChange}
      />
      <span>{value}</span>
    </div>
  );
};

export default Slider;

위의 코드에서는 useSlider Hook을 호출하여 슬라이더의 상태와 이벤트 핸들러를 가져옵니다. 반환된 값들을 사용하여 <input type="range"> 요소를 렌더링하고, 상태 값을 출력하기 위해 <span> 요소를 추가합니다.

슬라이더 사용하기

이제, 슬라이더 컴포넌트를 다른 컴포넌트에서 사용해보겠습니다.

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

const App = () => {
  return (
    <div>
      <h1>슬라이더 예제</h1>
      <Slider />
    </div>
  );
};

export default App;

위의 코드에서는 Slider 컴포넌트를 자식 컴포넌트로 사용하고, 슬라이더의 초기값과 최소값, 최대값을 설정할 수 있습니다.

결론

Custom Hook을 이용하여 슬라이더를 쉽게 구현할 수 있습니다. 이를 통해 슬라이더와 같은 상호작용하는 UI 컴포넌트를 더욱 쉽게 구현할 수 있습니다.

이번 포스트에서는 React에서 Custom Hook을 이용하여 슬라이더를 구현하는 방법을 알아보았습니다. Custom Hook을 사용하면 로직을 재사용하기 쉽게 추상화할 수 있기 때문에, 코드의 재사용성과 유지보수성을 높일 수 있습니다.

#React #CustomHook