React.forwardRef()를 활용하여 스크롤 관련 이벤트 처리 방법에 대해 알려주세요.

10 Nov 2023

reactjs

React에서는 forwardRef() 함수를 사용하여 부모 컴포넌트로부터 ref를 전달받을 수 있습니다. 이 기능을 활용하여 스크롤 관련 이벤트 처리를 할 수 있습니다.

forwardRef() 함수란?

forwardRef() 함수는 React 컴포넌트가 ref를 전달받을 수 있도록 해주는 함수입니다. 일반적으로 ref는 부모 컴포넌트에서 자식 컴포넌트로 넘겨지는 것이 기본 동작인데, forwardRef() 함수를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달할 수 있습니다.

const ChildComponent = React.forwardRef((props, ref) => {
  // 자식 컴포넌트의 로직
});

const ParentComponent = () => {
  const childRef = React.createRef();

  // 자식 컴포넌트에 ref 전달
  return <ChildComponent ref={childRef} />;
};

스크롤 이벤트 처리

스크롤 이벤트를 처리하기 위해서는 useEffect() 훅을 활용하여 컴포넌트가 마운트될 때와 언마운트될 때 이벤트 리스너를 추가하고 제거할 수 있습니다. 아래는 스크롤 이벤트를 처리하는 예시 코드입니다.

import React, { useEffect, useRef } from 'react';

const ScrollComponent = React.forwardRef((props, ref) => {
  const scrollRef = useRef();

  useEffect(() => {
    const handleScroll = () => {
      // 스크롤 이벤트 처리 로직
    };

    // 이벤트 리스너 추가
    scrollRef.current.addEventListener('scroll', handleScroll);

    // 컴포넌트 언마운트 시 이벤트 리스너 제거
    return () => {
      scrollRef.current.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <div ref={scrollRef}>{props.children}</div>;
});

const ParentComponent = () => {
  const scrollRef = useRef();

  return (
    <ScrollComponent ref={scrollRef}>
      // 스크롤 가능한 컨텐츠
    </ScrollComponent>
  );
};

위의 예시 코드에서 ScrollComponent는 스크롤 가능한 컴포넌트이며, 부모 컴포넌트인 ParentComponent는 ScrollComponent를 렌더링합니다. ScrollComponent는 forwardRef() 함수를 통해 ref를 전달받아 사용하며, ref를 사용하고 있는 scrollRef를 이용하여 스크롤 이벤트를 처리할 수 있습니다.

이제 ScrollComponent 컴포넌트 내의 handleScroll() 함수에서 실제 스크롤 이벤트를 처리할 수 있는 로직을 작성하면 됩니다.

#React #JavaScript