[React - Error Handling] Sidebar Router ๋ถ„๊ธฐ ์ฒ˜๋ฆฌ ๐Ÿ› 

Beanxxยท2022๋…„ 9์›” 21์ผ
0

Error-Handling

๋ชฉ๋ก ๋ณด๊ธฐ
1/7
post-thumbnail

๐Ÿ‘€ย Error

Router์˜ outlet ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ์‚ฌ์ด๋“œ๋ฐ” ํƒญ ํด๋ฆญ์‹œ ๋‚ด์šฉ ๋ฐ•์Šค์— ํƒญ์— ๋”ฐ๋ฅธ ๋‹ค๋ฅธ ๋‚ด์šฉ๋“ค์ด ๋ณด์—ฌ์ง€๋Š” ๊ฒƒ๊นŒ์ง€๋Š” ๊ตฌํ˜„์„ ํ–ˆ๋Š”๋ฐ ๋ฌธ์ œ๋Š” ๊ด€๋ฆฌ์ž์šฉ๊ณผ ๊ณ ๊ฐ์šฉ์˜ ์‚ฌ์ด๋“œ๋ฐ” ํƒญ ํƒ€์ดํ‹€์ด ์„œ๋กœ ๋‹ฌ๋ผ์•ผ ํ•œ๋‹ค๋Š” ์ ์ด๋‹ค.

๊ทธ๋ž˜์„œ ๋‚ด๊ฐ€ ์ด๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ ์ž ํ–ˆ๋˜ ๋ฐฉ์‹์€ useLocation().pathname์™€ ์‚ผํ•ญ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ route path๊ฐ€ /client/mypage๋กœ ์‹œ์ž‘ํ•  ๋•Œ๋Š” ๊ณ ๊ฐ์šฉ, ์ด์™ธ์—๋Š” ๊ด€๋ฆฌ์ž์šฉ ๋‚ด์šฉ์ด ๋ณด์—ฌ์ง€๋„๋ก ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

๊ทผ๋ฐ ๋ฌธ์ œ๋Š” /client/mypage์ผ ๋•Œ ๊ณ ๊ฐ์šฉ ํƒญ ๋‚ด์šฉ์ด ๋ณด์—ฌ์ง€๊ธฐ ํ•˜๋Š”๋ฐ ์ด ๋•Œ ํƒญ ํƒ€์ดํ‹€ ์ค‘ ํ•˜๋‚˜๋ฅผ ํด๋ฆญํ•˜๋ฉด /client/mypage/info ์ด๋Ÿฐ ์‹์œผ๋กœ route path๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฏ€๋กœ ์‚ฌ์ด๋“œ๋ฐ”๊ฐ€ ๊ณ ๊ฐ์šฉ์ด ์•„๋‹Œ ๊ด€๋ฆฌ์ž์šฉ ํƒญ ํƒ€์ดํ‹€๋“ค๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ๋‹ค.๐Ÿฅฒ

  • ๊ณ ๊ฐ์šฉ ๋งˆ์ดํŽ˜์ด์ง€์˜ ์‚ฌ์ด๋“œ๋ฐ” ํƒญ ๋ชฉ๋ก
    แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-09-21 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 2 02 35
  • ๊ด€๋ฆฌ์ž์šฉ ๋งˆ์ดํŽ˜์ด์ง€์˜ ์‚ฌ์ด๋“œ๋ฐ” ํƒญ ๋ชฉ๋ก
    แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-09-21 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 2 02 45

๐Ÿคนโ€โ™€๏ธย 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;
profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€