next.js에서 히스토리 탭 기능 구현

요구 사항을 살펴보면, 기본적으로 여러 페이지를 동시에 열어놓는 탭 기능과, 각 탭의 페이지 상태 유지등이 필요한 것 같습니다. 현재 사용하고 있는 방법도 잘못된 것은 아니지만, 복잡도가 늘어나거나 실제 웹사이트에 적용할 때 이슈가 발생할 수 있습니다. 예를 들어 모든 페이지 컴포넌트들을 하나의 파일에 넣어두었다면, 페이지들이 많아질수록 파일이 방대해지고 관리가 어려워집니다. Redux 혹은 Context API를 이용하여 탭 관리 로직을 분리하는 방법을 고려해보세요. 이렇게 함으로써 각 탭의 상태 및 내용 (탭에 해당하는 페이지 데이터)를 전역적으로 관리할 수 있으며, 클릭 시 해당 탭의 정보만 업데이트하여 랜더링하게 됩니다. 또 다른 접근 방식으로는 Tab, TabList와 같은 컴포넌트를 만들어 내부에서 라우팅 로직 및 상태 저장 등의 역할을 하는 방안입니다. TabList는 기본적으로 openTabs라는 state를 가지고 있어서, 사용자가 링크를 클릭할 때마다 해당 페이지를 openTabs에 추가합니다. 각 Tab 컴포넌트는 그에 해당하는 페이지의 상태를 유지하며, 탭이 선택되었는지 여부에 따라 보이거나 숨겨집니다. 하지만 Next.js는 기본적으로 SSR(Server Side Rendering)을 지원하기 때문에, 뷰의 상태가 유지되어야 하는 SPA(Single Page Application)스타일의 사이트 개발에 제한적일 수 있습니다. 이 경우 React Router 같은 클라이언트 사이드 라우터를 별도로 사용하거나, 다른 프레임워크나 라이브러리를 고려해보시는 것도 좋습니다.