개발자

Next.js를 이용한 사이트 내 탭 구현과 링크 추가 방법에 대한 고민

2023년 04월 03일조회 902

next.js를 사용해서 브라우저에 탭 기능을 사이트 내에서 구현해야 하는 상황입니다. 탭 기능에 추가로 페이지 내부에서 다른 페이지로 가는 링크를 클릭하면 탭 목록에 추가되어야 하고 기존에 있던 탭에 보이던 페이지는 상태가 유지되어야 합니다. 지금 구현한 방법은 미리 모든 페이지의 페이지 컴포넌트를 하나의 파일에 넣어두고 링크를 클릭하면 store에 해당 페이지의 데이터를 넣어주고 Layout 컴포넌트에서 router.path를 비교해서 show/hide을 결정해주고 있는데 뭔가 다른 방식이 없을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

커리어리 AI 봇님의 프로필 사진

탭 기능을 구현하는 데 있어서 현재 구현하신 방식은 유효하지만, 더 효율적인 방식을 찾고자 하는 것 같습니다. 다음과 같은 방법을 고려해보세요. 1. 탭 상태 관리: 탭 상태를 관리하기 위해 Next.js에서 제공하는 페이지 컴포넌트와 동적 라우팅 기능을 사용하실 수 있습니다. 동적 라우팅은 브라우저 URL의 변화를 감지하고, 이를 기반으로 해당 페이지 컴포넌트를 렌더링해줍니다. 2. 커스텀 훅 사용: 커스텀 훅을 사용하여 탭 상태와 관련된 로직을 분리할 수 있습니다. 이렇게 하면 탭 상태를 관리하는데 필요한 로직을 한 곳에서 관리할 수 있고, 더 깔끔한 코드를 작성할 수 있습니다. 3. 탭 컨테이너 컴포넌트 작성: 탭 컨테이너 컴포넌트를 작성하여 각 탭에 대한 렌더링 로직을 구현할 수 있습니다. 이 컴포넌트는 앞서 만든 커스텀 훅을 사용하여 탭 상태를 관리하고, 탭을 추가하거나 제거하는 기능을 제공합니다. 이와 같은 방법으로 탭 기능을 구현할 수 있습니다. handleLinkClick 이벤트 핸들러를 사용해 링크를 클릭할 때마다 새 탭을 추가하고, 탭을 클릭하면 해당 페이지 컴포넌트를 렌더링하도록 합니다. handleCloseTab 이벤트 핸들러는 탭을 닫을 때 사용되며, 탭 상태에서 해당 탭을 제거합니다. 이 구현 방식은 각 탭에 대한 상태를 관리하면서도, 각 페이지 컴포넌트의 렌더링을 독립적으로 처리할 수 있게 해줍니다. 이를 통해 더 깔끔하고 효율적인 코드를 작성할 수 있습니다. 다만, 이 방식을 사용할 때 페이지 상태를 유지하려면 각 페이지 컴포넌트가 상태를 저장하고 복원하는 로직을 포함해야 합니다. 상태를 유지하려면 페이지 컴포넌트의 상태를 전역 상태 관리 도구(예: Redux, MobX, React Context)를 사용하여 관리하는 것이 좋습니다. ----- ✅ Chat GPT의 답변을 평가해 주세요! - 답변 내용이 올바른지, 틀린 내용은 없는지 댓글로 작성해 주세요.

1// useTabs.js
2import { useState } from 'react';
3
4export default function useTabs(initialTabs = []) {
5  const [tabs, setTabs] = useState(initialTabs);
6
7  const addTab = (tab) => {
8    setTabs((prevTabs) => [...prevTabs, tab]);
9  };
10
11  const removeTab = (tab) => {
12    setTabs((prevTabs) => prevTabs.filter((t) => t !== tab));
13  };
14
15  return { tabs, addTab, removeTab };
16}
17
18// TabContainer.js
19import React from 'react';
20import useTabs from './useTabs';
21import Link from 'next/link';
22import { useRouter } from 'next/router';
23
24const TabContainer = () => {
25  const { tabs, addTab, removeTab } = useTabs([]);
26  const router = useRouter();
27
28  const handleLinkClick = (e, href) => {
29    e.preventDefault();
30    addTab(href);
31    router.push(href);
32  };
33
34  const handleCloseTab = (e, tab) => {
35    e.stopPropagation();
36    removeTab(tab);
37  };
38
39  return (
40    <div>
41      <nav>
42        {/* 탭 생성 */}
43        {tabs.map((tab) => (
44          <div key={tab} onClick={(e) => handleCloseTab(e, tab)}>
45            {tab}
46          </div>
47        ))}
48      </nav>
49
50      <div>
51        {/* 내부 링크 예시 */}
52        <Link href="/page1" passHref>
53          <a onClick={(e) => handleLinkClick(e, '/page1')}>Page 1</a>
54        </Link>
55        <Link href="/page2" passHref>
56          <a onClick={(e) => handleLinkClick(e, '/page2')}>Page 2</a>
57        </Link>
58        {/* 추가적인 링크들... */}
59      </div>
60      
61      <div>
62        {/* 탭에 해당하는 페이지 컴포넌트를 렌더링 */}
63        {tabs.map((tab) => {
64          if (tab === '/page1') {
65            return <Page1 key={tab} />;
66          } else if (tab === '/page2') {
67            return <Page2 key={tab} />;
68          }
69          // 추가적인 페이지들...
70        })}
71      </div>
72    </div>
73  );
74};

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!