한 페이지 내에서 다른 component로 이동하기

React scrollintoview 사용하기

• 특정 요소를 누르면 다른 특정 element까지 도달 가능

const App = () => {
  const scoll1Ref = useRef();
  
  const goBox = () => {
    scoll1Ref.current.scrollIntoView({behavior: "smooth"})
  }
  return (
    <div>
        <button onClick={goBox}>이동하기</button>
	    	<div></div>
        <div></div>
        <div ref={scoll1Ref}></div>
	    	<div></div>
    </div>
    )
}

→ 1번째 버튼을 누르면 3번째 div까지 스크롤이 되며 이동할 수 있다.

• 이 때, behavior: “smooth”를 주면 부드러운 효과 적용이 된다.