리액트 | 메뉴 탭을 useParams 라우팅으로 관리

최종 구현 모습

 

JSX 코드 마크업 구조

 

이번 프로젝트에서 마이페이지를 구현하면서 조금 애를 먹었던 부분이 있는데, 외부 네비게이션바에서 마이페이지 안에 메뉴 탭으로 구현했던 내 프로필, 내 레시피, 내 좋아요, 받은 댓글 네개의 탭을 각각 하나씩 다른 페이지처럼 접근할 수 있게 만드는 것이었다.

처음에는 useState를 이용해서 상태로 처음 currentTab을 0으로 두고, 현재 눌러진 탭이 currentTab이 되도록 구현했는데, 이렇게 했더니 마이페이지에 들어오면 무조건 상태가 0번째인 내 프로필로 시작이되고, 외부에서 마이페이지 각각의 탭에 접근할 수 없다는 문제점이 있었다.

 

기존 코드

const [currentTab, setCurrentTab] = useState(0);

 

 <Menu className="menu">
        {menuArr.map((menu, idx) => (
          //기존 menuTab에 useParams 적용 이전
          // <Li
          //   key={idx}
          //   onClick={() => selectMenuHandler(idx)}
          //   isFocused={idx === currentTab}
          // >
          //   {menu.name}
          // </Li>
        ))}
      </Menu>

 

결론적으로는 메뉴탭을 useParams로 관리하여 라우팅 주소값을 주면 각각의 탭이 다른 페이지처럼 보이게되어 문제를 해결 할 수 있었다. 

 

---

 

먼저 메뉴 탭이 될 <Menu> 컴포넌트에 속해있는 요소 네개를 menuArr 이라는 배열에 담아주었다. 

name에는 탭 메뉴에 박힐 li태그의 이름, title에는 <MenuTitle> 에 나올 제목, content에는 <MenuContent>에 실제로 뜰 컴포넌트를 담았다.

 

const { id } = useParams();

const menuArr = [
    {
      name: "내 프로필",
      title: "",
      content: <MyProfile />,
      id: 0,
    },
    {
      name: "내 레시피",
      title: "내가 작성한 레시피",
      content: <MyRecipeBox />,
      id: 1,
    },
    {
      name: "내 좋아요",
      title: "내가 좋아한 레시피",
      content: <MyRecipeLikedBox />,
      id: 2,
    },
    {
      name: "받은 댓글",
      title: "내가 받은 댓글",
      content: <CommentsBox />,
      id: 3,
    },
  ];

 

const { id } = useParams();

 

구조 분해할당으로 담은 id는 useParams에서 파라미터로 즉, 매개변수로 쓰일 값을 지정해준 것이다.

각각의 메뉴탭에 id 로 0, 1, 2, 3 을 주고 메뉴 탭을 누를때마다 라우팅 주소값이 0 ,1, 2, 3 으로 바뀌게 만드려는 목적이다.

 

 

JSX 코드

리턴부분을 보면, 탭 메뉴가 네가지가 나오는 Menu 컴포넌트에는 Li 태그로 관리하여 menuArr 배열을 map으로 돌려 각각 menu.id 값으로 연결되도록 하였다. 누르는 탭 or 네비게이션바에서 들어올 때 2번째 탭이면 /mypage/2 이런식으로 연결되도록 말이다.

제목과 컨텐츠 부분은 menuArr의 id번째의 title과 content가 되도록 코드 작성했다.

 

 return (
    <MenuTabContainer>
      <Menu className="menu">
        {menuArr.map((menu, idx) => (
          <Li key={idx} isFocused={String(idx) === id}>
            {/* 탭 메뉴 요소에 링크달기 */}
            {/* 링크랑 컴포넌트 탭 안에있는 컨텐트 연결 */}
            <Link to={`/mypage/${menu.id}`}>{menu.name}</Link>
          </Li>
        ))}
      </Menu>
      <MenuTitle>
        {menuArr[id].title}
      </MenuTitle>
      <MenuContent className="MenuContent">
        {menuArr[id].content}
      </MenuContent>
    </MenuTabContainer>
  );

 

 

💡

여기서 내가 헤맸던 부분 한 가지를 더 추가하자면, 

Li 태그에 보면 isFocused 라는 props가 있는데 이건 Li 요소가 가지고있는 자체 idx 와 useParams가 같을때만 css를 진한 민트색으로 나타내는 코드이다.

 

처음엔 isFocused={idx === id}

이렇게 작성했었는데, 네개의 메뉴탭 Li 요소가 모두 진한 민트색으로 채워지는게 아닌가..? 나촴.. 

알고보니, 가장 기본적인걸 놓쳤는데, useParams로 받는 id는 숫자가 아닌 문자형이다! 

따라서, map에서 돌리는 idx인 숫자형을 String으로 변환해주면 바로! 해결된 문제였다. 

 

//MenuTabStyle.js

export const Li = styled.li`
  width: calc(90% / 4); //li 차지공간 90%로하고 상위 컴포넌트에서 간격 띄우려고
  display: flex;
  height: 40px;
  cursor: pointer;
  border-radius: 35px;
  justify-content: center;
  align-items: center;
  background-color: var(--mint-300);

  &:hover {
    background-color: var(--mint-500);
    color: white;
    box-shadow: var(--red-050) 0px 10px 20px, var(--red-100) 0px 6px 6px;
  }

  ${({ isFocused }) =>
    isFocused &&
    css`
      background-color: var(--mint-500);
      box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, var(--red-075) 0px 6px 6px;
    `}
`;

 

App.js에 마이 페이지를 라우팅할 주소를 아래와 같이 적어주었다.

/mypage/0 이런식으로 주소를 치면 렌더링하는 컴포넌트는 <MenuTab> 컴포넌트를 포함하고 있는 <MyPage> 컴포넌트이다. 

App.js에도 useParams를 import 해와야되는건지..? 헷갈렸지만 안해줘도 아래 코드만 넣으면 잘 작동하였다.

 

//App.js

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
...생략
import MyPage from "./pages/MyPage/MyPage";

function App() {
  return (
<BrowserRouter>
        <GlobalStyle />
          <Gnb />
          <Routes>
  	...생략
            <Route path="/mypage/:id" element={<MyPage />} />
          </Routes>
 	</BrowserRouter>
    
   );
}

export default App;

 

완성 코드

//MenuTab.js

import { Link, useParams } from "react-router-dom";
import CommentsBox from "../MyCommentsBox/CommentsBox";
import MyProfile from "../MyProfile/MyProfile";
import MyRecipeBox from "../MyRecipeBox/MyRecipeBox";
import MyRecipeLikedBox from "../MyRecipeLikedBox/MyRecipeLikedBox";
import {
  MenuTabContainer,
  Menu,
  Li,
  MenuTitle,
  MenuContent,
} from "./MenuTabStyle";

const MenuTab = () => {
  
  const { id } = useParams();
  // console.log("usParmas아이디값", id);

  const menuArr = [
    {
      name: "내 프로필",
      title: "",
      content: <MyProfile />,
      id: 0,
    },
    {
      name: "내 레시피",
      title: "내가 작성한 레시피",
      content: <MyRecipeBox />,
      id: 1,
    },
    {
      name: "내 좋아요",
      title: "내가 좋아한 레시피",
      content: <MyRecipeLikedBox />,
      id: 2,
    },
    {
      name: "받은 댓글",
      title: "내가 받은 댓글",
      content: <CommentsBox />, //시간 변환 함수 내려주기
      id: 3,
    },
  ];
  // console.log(menuArr);

  return (
    <MenuTabContainer>
      <Menu className="menu">
        {menuArr.map((menu, idx) => (
          <Li key={idx} isFocused={String(idx) === id}>
            {/* 탭 메뉴 요소에 링크달기 */}
            {/* 링크랑 컴포넌트 탭 안에있는 컨텐트 연결 */}
            <Link to={`/mypage/${menu.id}`}>{menu.name}</Link>
          </Li>
        ))}
      </Menu>
      <MenuTitle>
        {menuArr[id].title}
      </MenuTitle>
      <MenuContent className="MenuContent">
        {menuArr[id].content}
      </MenuContent>
    </MenuTabContainer>
  );
};

export default MenuTab;

 

누군가에겐 도움이 되길 바라며..!