React.forwardRef()를 활용하여 스크롤 관련 이벤트 처리 방법에 대해 알려주세요.
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