메뉴 클릭시 특정 DOM 요소로 scroll 이동

여러개의 useRef 사용

결과

내용

• 자식 컴포넌트에 있는 nav의 메뉴 클릭시 부모 컴포넌트에 있는 특정 DOM 요소로 scroll 이동

코드

//자식 컴포넌트
const Nav = props => {
  const handleMove = () => {
    props.move();
  };
  
  return (
    <Project onClick={handleMove}>PROJECT</Project>
	);
}
// 부모 컴포넌트
const Main = () => {
  const ref = useRef();

  const move = () => {
    ref.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <Nav move={move} />
 	<ProjectTitle ref={ref}>Project</ProjectTitle>
	);
}

배운점

처음 코드

//자식 컴포넌트
const Nav = ({ moveScroll }) => {

  const handleMove = () => {
    moveScroll.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
 <Project to='' onClick={handleMove}>PROJECT</Project>
);
}

//부모 컴포넌트
const App = () => {
 const moveScroll = useRef();

return(
	<ProjectTitle ref={moveScroll}>Project</ProjectTitle>
	);
}

처음에는 부모 컴포넌트에서 자식 컴포넌트로 전달하려 했으나 안돼서, 스택오버플로우에 질문도 하고 구글링을 몇시간 한 결과
useEffect, React.createRef를 사용하려고 이것 저것 해보다가 결국 안됐다.
다시 심호흡을 하고 찬찬히 생각해보았다
자식 컴포넌트에서 넘겨주는게 맞는것 같아서 자식 컴포넌트에서 onClick 함수를 부모로 넘겨주는것 부터 콘솔로 찍어 보았고, Link에서 Button으로 변경했다
해냈다!