Next.js 메뉴 클릭 시 스크롤 이동화면 만들기

어떤 글을 쓸 거냐면

Navbar를 클릭하면 한 페이지 내에서 스크롤로 이동하는 페이지를 제작하고자 한다.

💭 고민하기

• next.js 의 폴더 라우팅으로 포폴 페이지를 제작하다가 계속 페이지를 이동해야 하는 번거로움과 불편함을 겪었다.
• 우선 포트폴리오에서는 한 페이지당 정보량이 많지 않고,
• 해당 정보들을 한 눈에 볼 수 있도록 메뉴를 클릭하면 다른 페이지로 이동하는 게 아니라
• 한 페이지 내에서 내 프로필과 프로젝트 정보들을 볼 수 있는 것이 사용자 경험에 훨씬 좋다고 생각했다.

🙌 사용하기

• 리액트에서의 useRef를 사용하여 DOM에 접근하여 이벤트를 제어할 수 있다.
• scrollIntoView 라는 메서드를 이용하여 스크롤 이동을 제어할 수 있다.

예제를 적용해보면 쉽게 이해가 가능하다. 어렵지 않은 메서드!

⌨️ 구현하기

• 함수를 생성하여 해당 메서드를 사용한다.
• 배열을 만들어 해당 인덱스를 클릭하면 이동할 수 있도록 만들었다.

  const handleScrollView = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>
  ) => {
    const name = (event.target as HTMLElement).innerText;
    const menuTabs: { [key: string]: number } = {
      컴포넌트1 : 0,
      컴포넌트2 : 1,
      컴포넌트3 : 2,
    };
    const targetElement = scrollRef.current[category[name]];

    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth" });
    }
  };

TS를 사용하고 있어서 event.target 에 대한 타입 설정이 쉽지 않았다.

• div 태그를 클릭하면 해당하는 div 태그로 이동하도록 한다.

 <div>
        <div ref={(el) => (scrollRef.current[0] = el)}>
          <About />
        </div>
        <div ref={(el) => (scrollRef.current[1] = el)}>
          <Archiving />
        </div>
        <div ref={(el) => (scrollRef.current[2] = el)}>
          <Projects />
        </div>
      </div>

• 이 과정에서 기존에 작성해놓은 코드들과 이슈가 생기는데 나같은 경우는 z-index가 겹치는 문제, 메뉴 냅바가 상단에 고정되지 않는 문제, 냅바 클릭하여 스크롤 이동 시 해당 컴포넌트의 일부분을 가리는 문제 등이 있었다. 이를 해결하는 과정은 다음 포스팅에 기록해보겠다.

회고

• 내가 참고했던 블로그처럼 hook을 제작하여 아예 여러곳에서 사용할 수 있도록 구현하면 효율적일 것 같다.
• 지금처럼 메뉴가 몇 안 되는 페이지는 스크롤 이동이 간편하지만, 메뉴당 정보량이 많은 경우는 계속 스크롤로 이동을 해야되는데, 이 경우에는 해당 방법이 적합하지 않다고 생각한다.
• 어떤 회사 웹사이트에서는 이렇게 스크롤 이동 방식으로 모든 정보를 보여주기도 하는데, 사용자에게 어떻게 데이터를 보여줘야 직관적이고 편리하게 보이는지 고민해봐야 할 문제인 것 같다.
  
  
  
  
  
  

참고 문서
React) 클릭하면 특정 div로 스크롤 이동하는 hook 만들어보기