[Next.js] Tab Page 기능 구현

웹 개발에 있어 빠질 수 없는 Tab은 진짜 구현이 간단한것 같으면서도 까다로운 것 같다.

 

특히 기존 SPA 방식인 Component로 Tab을 구현하는 방식이 아닌 Next.js에서는 Page단위로 Tab Page를 만드는 경우도 있었다.

 

아직 국내에는 많은 Next.js의 개발 이슈라든지 정보들이 많이 없다는게 정말 안타깝다.

 

이번 Tab Page 개발을 통해서 Next.js 개발자들에게 작은 도움이 되었으면 좋겠다.

---

기본적인 Tab Page 구조

아주 Simple하게 Page1, Page2, Page3 페이지를 만들었고 공통으로 쓸 Header, 그리고 이 Tab 기능의 핵심 Component인 Layout Component를 만들어 주었다.

 

Header Page

먼저 Next.js에서 기본적으로 제공해주는 Link Component를 통해 Header에서 사용할 Tab 버튼을 만들어 주었다.

굳이 Link Component가 아니더라도 Next.js에서 기본적으로 제공해주는 useRouter 기능을 쓰는 것도 괜찮을 것 같다.

 

Layout Component

이 기능의 핵심인 Layout Component다.

 

먼저 Layout 함수형 컴포넌트 안에 Header를 넣어주고 {props.children}을 넣어 Header에서 클릭이 될 때 마다 해당 Page들을 불러와 준다.

 

위 예제는 기본적인 Style을 구현했지만 상황에 따라서 styled-jsx나 Styled Component로 구현도 물론 가능하다!!

 

Page1, Page2, Pag3

Page2, Page3 공통 코드

이제 만들어준 Layout Component를 Page1에서 컴포넌트로 감싸주며 마무리를 한다.

Header Component로 만든 Link 버튼으로 Page의 이동이 가능하다.

간단 정리

1. Tab 기능을 사용할 수 있는 Header 제작.(Link, useRouter 활용)

2. Header에서 클릭할 때마다 Page가 변경 될 수 있는 Layout Component 제작

3. 불러오고 싶은 Page들에 Layout Component로 Wrapping

---

기존 SPA의 방식 같은 경우 Tab 기능은 URL은 유지하면서 안에서 Component만 변경되어 URL 변경없이 구현하는 것이 일반적이였다.

 

하지만 Next.js에서는 URL이 변경되면서 Tab을 구현하는 기능이 필요할 때가 있다.

 

이 기능이 정말 의외로 익숙하지 않아 나는 개인적으로 엄청 애를 먹었다;;

 

Next.js를 개발하면서 저런 간단한 Tab 기능보다는 Page안에 Tab을 넣고 그 Tab으로 다시 Page를 불러오는 식의 구현도 분명 있을 것이라고 생각한다.

 

마지막으로 이 기능을 구현한 Github 주소와, 이 기능을 참고한 블로그를 소개한다.

 

 

 

Github : Next.js-Study/next-tab-page-example at main · soft91/Next.js-Study (github.com)

soft91/Next.js-Study

참고 블로그 : [Next.js] 공유된 컴포넌트 사용하기 (tistory.com)