[React - Error Handling] Sidebar Router 분기 처리 🛠

👀 Error

Router의 outlet 속성을 이용하여 사이드바 탭 클릭시 내용 박스에 탭에 따른 다른 내용들이 보여지는 것까지는 구현을 했는데 문제는 관리자용과 고객용의 사이드바 탭 타이틀이 서로 달라야 한다는 점이다.

그래서 내가 이를 구현하고자 했던 방식은 useLocation().pathname와 삼항연산자를 사용하여 route path가 /client/mypage로 시작할 때는 고객용, 이외에는 관리자용 내용이 보여지도록 처리하는 것이다.

근데 문제는 /client/mypage일 때 고객용 탭 내용이 보여지기 하는데 이 때 탭 타이틀 중 하나를 클릭하면 /client/mypage/info 이런 식으로 route path가 변경되므로 사이드바가 고객용이 아닌 관리자용 탭 타이틀들로 변경되었다.🥲

• 고객용 마이페이지의 사이드바 탭 목록
  

• 관리자용 마이페이지의 사이드바 탭 목록
  
  

🤹‍♀️ Solving

route path를 /client/mypage 요렇게 다 비교할 필요가 없고, route path에 client가 들어가면 고객용, admin이 들어가면 관리자용 탭을 보여주면 된다.

1. 예를 들어 route path가 /client/mypage/myinfo이면

   console.log(useLocation().pathname)
    // /client/mypage/myinfo

2. 이를 split("/")으로 나누면

   console.log(useLocation().pathname.split('/'))`
    // ['', 'client', 'mypage', 'myinfo']

3. 여기서 client 또는 admin 값만 가져오려면 index 1을 가져오면 되므로

   const pathName = useLocation().pathname.split("/")[1]
   console.log(pathName) // client or admin

   즉, 변수 pathName에는 client 또는 admin 값이 담아있게 된다.
4. 다음으로 client와 admin이 key인 객체를 생성한다.

   const Tabs = { client: clientTabs, admin: adminTabs};

5. 마지막으로 pathName(client 또는 admin)을 Tabs의 key로 넣어 이에 해당하는 값인 미리 지정해둔 탭 배열을 map() 돌리면 된다.

   {Tabs[pathName].map((tab, idx) => {
     return (
   		 // ~~
     );
   })}

// 전체 코드쓰
// MySideBar.js
import React, { useState } from "react";
import styled from "styled-components";
import { NavLink, useLocation } from "react-router-dom";
import SidebarItem from "../molecules/SidebarItem";

const MySideBar = () => {
  const paths = useLocation().pathname;
	// const pathName = useLocation().pathname; <- 기존 에러 코드
  const pathName = useLocation().pathname.split("/")[1];

  const clientTabs = [
    { name: "내 정보", path: "/client/mypage/myinfo" },
    { name: "예약 조회", path: "/client/mypage/rez" },
    { name: "이전 예약 조회", path: "/client/mypage/pastrez" },
    { name: "내 리뷰 보기", path: "/client/mypage/review" },
  ];

  const adminTabs = [
    { name: "내 정보", path: "/admin/mypage/myinfo" },
    { name: "캠핑장 등록 및 관리", path: "/admin/mypage/post" },
    { name: "캠핑장 예약 관리", path: "/admin/mypage/rez" },
    { name: "캠핑장 리뷰 관리", path: "/admin/mypage/review" },
  ];

	// 객체로 처리
  const Tabs = {
    client: clientTabs,
    admin: adminTabs,
  };

  return (
    <SideBarContainer>
	{/* 기존 에러 코드 (삼항 연산자 활용) ->
	    {(pathName === "/client/mypage/" ? clientTabs : adminTabs) */}
      
      {Tabs[pathName].map((tab, idx) => {
        return (
          <NavLink to={tab.path} key={idx}>
            <SidebarItem
              tab={tab}
              isActive={paths === tab.path ? true : false}
            />
          </NavLink>
        );
      })}
    </SideBarContainer>
  );
};

export default MySideBar;