react에서 특정 컴포넌트로 스크롤 이동시키는 방법?

네 스크롤을 이동 시킬 수 있습니다. 1. 맨 위로 이동하기 이건 window.scrollTo(0, 0) 를 이용하면 될것 같아요. scrollTo 뒤에 x좌표와 y좌표를 넣어주면 해당 위치로 스크롤 시킬 수 있습니다. https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo 2. 원하는 컴포넌트로 위치시키기 이것도 위의 원리와 동일하게 원하는 컴포넌트의 x좌표와 y좌표를 알면 할 수 있겠죠? 하지만 이건 어렵습니다. 매번 계산 하는 것이 비효율적입니다. 이때는 useRef와 scrollIntoView를 사용하면 좋을 것 같아요 예시 코드를 보면 도움이 되실지 모르겠지만 적어놓겠습니다. Component에서 ref를 받아 원하는 부분에 ref를 추가해주면 됩니다. const Page = () => { const myRef = useRef(null) return ( <button onClick={()=> { myRef.current.scrollIntoView() } /> <Component1 /> <Component2 /> <Component3 ref={myRef} /> <Component4/> <Component5 /> }

React에서 특정 컴포넌트로 스크롤 이동시키는 방법은 여러 가지가 있지만, 가장 간단한 방법은 ' scrollIntoView() ' 메서드를 사용하는 것입니다. 이 메서드는 해당 엘리먼트가 보이도록 스크롤을 조정합니다. 예를 들어, 버튼을 클릭하면 해당 컴포넌트의 위치로 스크롤이 이동하도록 하려면 다음과 같이 코드를 작성할 수 있습니다. 아래 코드에서는 useRef 훅을 사용하여 특정 컴포넌트의 참조(ref)를 생성합니다. 그리고 ' scrollToRef() ' 함수에서는 ' scrollIntoView() ' 메서드를 사용하여 참조(ref)가 가리키는 엘리먼트가 보이도록 스크롤을 이동합니다. 마지막으로, 버튼을 클릭하면 ' scrollToRef() ' 함수가 실행되도록 합니다. 참고로, ' scrollIntoView() ' 메서드는 IE에서는 지원되지 않습니다. 따라서, IE에서도 작동하도록 하려면 다른 방법을 사용해야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { useRef } from "react";

function App() {
  const ref = useRef(null);

  const scrollToRef = () => {
    ref.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      <button onClick={scrollToRef}>특정 컴포넌트로 이동</button>
      <div style={{ height: "1000px" }}></div>
      <div ref={ref}>이동하고자 하는 컴포넌트</div>
    </div>
  );
}

export default App;