requestAnimationFrame

mui 탭 컴포넌트를 사용하면서 탭이 변경될 때마다 컴포넌트가 렌더링 되는 과정에서

스크롤을 최하단으로 내리고 싶을 때 사용한다.

 

스크롤 애니메이션등, 애니메이션에 최적화된 함수이다.

 

  useEffect(() => {
    if (componentEndRef.current) {
      const scroll = () => {
        componentEndRef.current?.scrollIntoView({behavior: 'smooth'});
      };
      requestAnimationFrame(() => {
        requestAnimationFrame(scroll);
      });
    }
  }, []);
  
  return (
  	... 여러가지 컴포넌트
  	
    <Box ref={componentEndRef} />
  );

렌더링 되는 컴포넌트보다 아래쪽에 ref를 두면 된다.