next.js에서 브라우저에 있는 탭기능을 구현하려고 합니다.

1. 기존 탭 상태 값 유지 url에 쿼리 파라미터를 이용해서 상태 값을 유지합니다. Excalidraw나 tldraw 같은 화이트보드 앱 등에서 주로 보셨을 겁니다. - useSearchParams() / client component - const HomePage = ({searchParams}) => { ...} / server component 위 훅 또는 props를 이용해서 상태 값의 형태를 만들고 조작하고, 앱 생명 주기동안 유지될 수 있도록 contextAPI 또는 zustand 같은 것을 이용하여 저장하세요. contextAPI를 쌩으로 사용한다면, 탭 추가, 현재 탭, 이전 탭, 탭 삭제 같은 동작을 리듀서로 정의해서 useReducer 훅과 함께 사용하세요. 2. Tab UI 단순 예시용으로 쓴 의사코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// TabInBrowser.tsx
"use client";

import { useContext } from "react";

const TabsInBrowser = () => {
  const tabInfo = useContext(TabInfosContext);
  return (
    <Tabs>
      <TabHeader>
        {/* Tab Header. for example: nav for tabs */}
        {tabInfo.map((info) => (
          <>...</>
        ))}
      </TabHeader>
      <TabContent>
        {/* Tab Content. Rendering Informations with URL search params. The informations are from react context api or zustand*/}
        {/* ... */}
        {tabInfo.map((info) => (
          <>...</>
        ))}
        {/* ... */}
      </TabContent>
    </Tabs>
  );
};