📌문제1. Navbar list를 클릭하면 해당하는 section으로 scroll이동 이벤트를 주고 싶었다. window.scroll() 이라는 webAPI를 이용하였고, 각 section의 offsetY 값을 받아와 top 값에 대입했다. 그러나 모니터 화면 크기에 따라 위치가 변화할 것이고, 유연한 코드가 아니라 개선의 필요성이 있었다.

💫해결

UseREF

각 section components 마다 useRef를 만들어주고, 그것들의 offsetTop 값을 window.scrollTop({top: offset...}) 값에 넣어준다. 그러나 여기서 또 문제가 발생했다.

📌문제2.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

💫해결

forwardRef

→ 부모 컴포넌트에서 자식 컴포넌트의 DOM요소에 접근할 때는 forwardRef를 사용하여 접근해야 한다.

🚩

	const aboutSection = useRef(null);
  const projectSection = useRef(null);
  const skillSection = useRef(null);
  const contactSection = useRef(null);
  const scrollToSection = (elementRef) => {
    if (elementRef.current !== null) {
      const offset = elementRef.current.offsetTop;
      window.scrollTo({
        top: offset - 100,
        behavior: "smooth",
      });
    }
  };

return (
    <div>
      <Navbar
        scrollToSection={scrollToSection}
        aboutSection={aboutSection}
        projectSection={projectSection}
        skillSection={skillSection}
        contactSection={contactSection}
      />

section component 마다 ref 속성을 넣어주고, 그 해당 DOM의 offsetTop을 offset 변수에 할당했다. 그리고 각각의 component로 가서 forwardRef로 부모 컴포넌트가 보내준 ref를 받는다.

🚩