React에서 Slider 컴포넌트 만들기

 

Slider 컴포넌트란 무엇인가?

Slider 컴포넌트는 사용자가 마우스나 터치 입력을 통해 값을 조절할 수 있도록 하는 UI 요소입니다. 슬라이더는 범위 내에서 값을 선택하거나, 단순히 시각적인 요소로도 활용됩니다. 일반적으로 슬라이더는 음량 조절, 화면 밝기 조정, 데이터 필터링 등의 기능에 사용됩니다.

React에서 Slider 컴포넌트를 구현하려면 다음과 같은 주요 요소를 고려해야 합니다:

• 상태 관리: 슬라이더의 현재 값을 상태로 관리해야 합니다.
• 이벤트 처리: 마우스나 터치 이벤트를 처리하여 사용자의 입력에 따라 값을 업데이트합니다.
• 스타일링: 슬라이더의 트랙(track), 핸들(handle), 레이블(label) 등을 적절히 꾸며야 합니다.

---

기본 Slider 컴포넌트 구현

React의 useState와 이벤트 핸들러를 사용하여 기본적인 Slider 컴포넌트를 만들어보겠습니다.

1. 기본 슬라이더 구현

아래 코드는 슬라이더의 최소값, 최대값, 현재값을 상태로 관리하며, 사용자의 입력에 따라 값을 업데이트합니다.

import React, { useState } from 'react';
import './Slider.css';

function Slider({ min = 0, max = 100, step = 1 }) {
  const [value, setValue] = useState((min + max) / 2);

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

  return (
    <div className="slider-container">
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={handleChange}
        className="slider"
      />
      <p>현재 값: {value}</p>
    </div>
  );
}

export default Slider;

2. Slider.css (스타일링)

간단한 슬라이더 스타일을 작성합니다.

.slider-container {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}

.slider {
  width: 100%;
  margin: 10px 0;
}

p {
  font-size: 16px;
}

위 코드로 기본 슬라이더 컴포넌트를 구현할 수 있습니다. min, max, step 값을 props로 받아서 재사용 가능한 컴포넌트를 만들었습니다.

---

커스텀 Slider 컴포넌트 구현

기본 슬라이더를 더 발전시켜 커스텀 스타일과 레이블, 다중 핸들 기능을 추가할 수 있습니다.

1. 스타일 커스터마이징

input[type="range"]는 기본 브라우저 스타일을 가지고 있으므로 CSS를 활용하여 사용자 정의 스타일을 적용할 수 있습니다.

.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: linear-gradient(90deg, #4caf50, #ddd);
  border-radius: 5px;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4caf50;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4caf50;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
}

2. 레이블 추가

슬라이더에 최소값, 최대값, 현재값을 시각적으로 표시하는 레이블을 추가합니다.

function Slider({ min = 0, max = 100, step = 1 }) {
  const [value, setValue] = useState((min + max) / 2);

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

  return (
    <div className="slider-container">
      <div className="slider-labels">
        <span>{min}</span>
        <span>{max}</span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={handleChange}
        className="slider"
      />
      <p>현재 값: {value}</p>
    </div>
  );
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

---

고급 Slider 컴포넌트: 다중 핸들

다중 핸들은 필터 범위를 선택하거나 특정 값의 범위를 조정할 때 유용합니다. React에서 이를 구현하려면 두 개의 상태를 관리하고, 각각의 핸들에 대해 이벤트를 처리해야 합니다.

1. 코드 구현

아래는 두 개의 핸들을 가진 슬라이더입니다.

import React, { useState } from 'react';
import './Slider.css';

function MultiSlider({ min = 0, max = 100, step = 1 }) {
  const [values, setValues] = useState({ minValue: min, maxValue: max });

  const handleMinChange = (event) => {
    const newValue = Math.min(event.target.value, values.maxValue - step);
    setValues({ ...values, minValue: newValue });
  };

  const handleMaxChange = (event) => {
    const newValue = Math.max(event.target.value, values.minValue + step);
    setValues({ ...values, maxValue: newValue });
  };

  return (
    <div className="slider-container">
      <div className="slider-labels">
        <span>{values.minValue}</span>
        <span>{values.maxValue}</span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={values.minValue}
        onChange={handleMinChange}
        className="slider"
      />
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={values.maxValue}
        onChange={handleMaxChange}
        className="slider"
      />
      <p>
        선택된 범위: {values.minValue} ~ {values.maxValue}
      </p>
    </div>
  );
}

export default MultiSlider;

---

결론

React에서 Slider 컴포넌트를 구현하는 방법은 단순한 기본 슬라이더부터 고급 기능이 포함된 커스텀 슬라이더까지 다양합니다. 이 과정에서 중요한 것은 상태 관리와 이벤트 처리, 그리고 적절한 스타일링입니다.

위 코드를 기반으로 프로젝트 요구 사항에 맞는 슬라이더를 구현하고, 더 나아가 외부 라이브러리(예: rc-slider 또는 react-slider)를 활용하면 개발 시간을 단축할 수 있습니다.