React에서 재사용 가능한 범위 슬라이더를 만드는 방법

기본 HTML <input type="range">는 React에서 단일 값 슬라이더를 만들 때 좋은 출발점입니다. 그 값을 부모 컴포넌트에 두고, 값, 범위, 변경 핸들러를 재사용 가능한 RangeSlider에 전달하세요. 독립적으로 선택되는 두 값에 대해서는 multi-range-slider-react가 외부 패키지입니다. 동작하는 통합을 작성하기 전에 릴리스별 API를 확인해야 합니다.

HTML <input>을 사용해 사용자 정의 RangeSlider React 컴포넌트 만들기

현재 값을 부모에 유지하면 앱의 다른 곳에서 표시하거나 사용할 수 있습니다. 부모는 value, min, max, onChange를 직접 props로 전달합니다. 자식은 네이티브 input에 동일한 props를 사용하고, 상태를 업데이트하기 전에 input의 문자열 값을 숫자로 변환합니다.

다음 브라우저 마크업은 네이티브 컨트롤의 정적 예시입니다. React 컴포넌트가 아니며 그 자체로는 런타임 출력이 없습니다.

<label for="volume">Volume: <output id="volume-value">40</output></label>
<input id="volume" type="range" min="0" max="100" value="40">

React 앱에서는 부모 컴포넌트와 재사용 가능한 컴포넌트를 별도 파일에 두세요. 이 완전한 한 줄 파일들은 표준 React 앱 빌드에서 지원되는 JSX를 사용합니다. App.js에서는 useState를 가져오고, 부모 값을 초기화한 뒤, 일치하는 범위, 값, 핸들러 props를 자식에 전달합니다.

App.js: import { useState } from 'react'; import RangeSlider from './rangeSlider'; export default function App() { const [value, setValue] = useState(40); return <main><p>Volume: {value}</p><RangeSlider min={0} max={100} value={value} onChange={(event) => setValue(Number(event.currentTarget.value))} /></main>; }

rangeSlider.js에서는 그 직접 props를 받아들이고, App.js가 사용하는 기본 내보내기로 컴포넌트를 내보냅니다.

rangeSlider.js: export default function RangeSlider({ min, max, value, onChange }) { return <input type="range" min={min} max={max} value={value} onChange={onChange} aria-label="Volume" />; }

여기서 App이 값을 소유하고, RangeSlider는 그 props로부터 컨트롤을 렌더링합니다. 사용자가 슬라이더를 움직이면 onChange는 event.currentTarget.value에서 새 값을 읽고, 숫자로 변환한 뒤 setValue를 호출합니다. 그러면 React는 업데이트된 숫자를 렌더링하고 input에 다시 전달합니다. input의 접근 가능한 이름은 그것이 제어하는 값과 관련되게 유지하세요.

이벤트에서 상태로의 변환은 일반 JavaScript를 사용하며 React와 독립적으로 예시할 수 있습니다.

const currentValue = 40;
const event = { currentTarget: { value: '57' } };
const nextValue = Number(event.currentTarget.value);
const displayedValue = nextValue;
console.log(`Value: ${displayedValue}`);

Value: 57

실행 가능한 스니펫은 숫자 변환과 표시 값만을 보여줍니다. 위의 React 컴포넌트들은 같은 값이 컴포넌트 상태에 어떻게 연결되는지를 보여줍니다. 이 문서의 실행 증거는 React나 JSX 실행이 아니라 이 JavaScript 변환을 다룹니다.

multi-range-slider-react 라이브러리를 사용해 React에서 멀티 범위 슬라이더 만들기

네이티브 범위 input은 하나의 현재 값을 나타냅니다. multi-range-slider-react는 외부 패키지이며 React에 내장된 라이브러리가 아닙니다. 그 npm 패키지 페이지에는 패키지 릴리스가 나열되어 있습니다. 제공된 자료는 고정된 릴리스를 명시하지 않으며 해당 릴리스의 문서나 소스를 포함하지 않으므로, 동작하는 예시에 필요한 컴포넌트 props나 이벤트 페이로드를 입증할 수 없습니다. 추측한 props 이름이나 이벤트 필드를 통합에 복사하지 마세요. 이 패키지를 구현하기 전에 릴리스를 선택하고, 하한값과 상한값이 어떻게 전달되고 반환되는지 그 문서나 소스에서 확인한 뒤, 검증된 버전을 애플리케이션에 고정하세요.

이 문서는 아직 동작하는 MultiRangeSlider 통합을 시연하거나, 선택된 하한값과 상한값을 표시하거나, 패키지 이벤트로 인한 부모 상태 업데이트를 보여줄 수 없습니다. 그러한 세부 사항은 선택한 릴리스의 문서화된 API에 달려 있습니다. 위의 실행 가능한 JavaScript 예시는 네이티브 단일 값 RangeSlider의 숫자 변환만을 다루며, React나 이 패키지를 실행하지 않습니다.

부모가 제어하는 값 하나가 필요하고 작은 컴포넌트를 직접 소유하고 싶다면 네이티브 RangeSlider를 사용하세요. 패키지 기반의 두 값 구현은 그 props와 상태 업데이트 경로를 정확히 보여주기 전에 검증된 릴리스별 API 세부 정보가 필요합니다. 이들은 별개의 접근 방식이며, 네이티브 컴포넌트는 패키지가 사용하지 않습니다.