React.forwardRef()는 React에서 고급 리액트 컴포넌트 패턴을 사용하여 ref 전달을 할 수 있게 해주는 기능입니다. 이를 활용하여 슬라이더 컴포넌트를 만들 수 있습니다.

슬라이더 컴포넌트 생성

먼저, 슬라이더 컴포넌트를 생성하고 ref 속성을 받을 수 있도록 React.forwardRef() 함수를 이용해서 래핑합니다. 아래는 예시입니다.

import React from 'react';

function Slider(props, ref) {
  // 슬라이더 컴포넌트의 로직 작성

  return <input type="range" ref={ref} {...props} />;
}

export default React.forwardRef(Slider);

위의 코드에서 Slider 컴포넌트는 input 요소를 반환합니다. 이 때, ref 속성을 전달받아서 input 요소에 연결해줍니다.

슬라이더 컴포넌트 사용하기

이제 슬라이더 컴포넌트를 사용하는 예시를 살펴보겠습니다. 부모 컴포넌트에서 Ref를 생성하고 슬라이더에 연결하여 값을 제어할 수 있습니다.

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

function ParentComponent() {
  const sliderRef = React.useRef();

  const handleClick = () => {
    sliderRef.current.value = 50; // 슬라이더 값 변경
  }

  return (
    <div>
      <Slider ref={sliderRef} />
      <button onClick={handleClick}>Set Value</button>
    </div>
  );
}

export default ParentComponent;

위의 코드에서 Slider 컴포넌트를 ParentComponent에서 사용합니다. Slider 컴포넌트에 ref 속성으로 sliderRef 값을 전달하고, 버튼을 클릭하면 sliderRef.current.value를 통해 슬라이더 값을 변경할 수 있습니다.

결론

React.forwardRef()를 사용하여 슬라이더 컴포넌트에 ref 속성을 연결하여 값 제어를 할 수 있습니다. 이를 활용하면 다양한 상황에서 컴포넌트 간의 통신이 가능해지며, 유연하고 재사용 가능한 코드를 작성할 수 있습니다.

#React #리액트