[useRef]메뉴를 클릭하면 해당 섹션으로 이동

목표:
useRef를 사용하여 메뉴를 클릭하면 해당섹션으로 이동하는 기능을 구현해본다.

과정:
1) 구글에 검색을 해보았다.
2) 2가지의 방법 검토. 첫번째는 npm 라이브러리 사용, 두번째는 useRef를 사용.
3) hook을 만들어서 재사용하는 방식이 유용해보여서 두번째 방법을 선택하였다.

개념:
1) useRef는 랜더링에 필요하지 않는 값을 참조하려고 할 때 사용
2) 예시) const element=useRef();
위는 reference의 객체를 반환한다. element.current는 현재 참조하고 있는 값이며
주로 dom의 요소를 말한다.

import { useRef } from 'react';

//hook
function useMoveScrool() {
 const element = useRef<HTMLDivElement>(null);
 const onMoveToElement = () => {
   element.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
 };
 return { element, onMoveToElement};
}

export default useMoveScrool;

/*cosnt {element, onMoveToElement} = useMoveScrool()

return (
<>
   <div onClick={onMoveToElement}>
       이걸 누르면?
   </div>
   <div ref={element}>
   	여기로 옵니다.
   </div>
</>
)*/