프로젝트를 하면서 이렇게 왼쪽에 메뉴를 만들어야 했다.
하고자 하는 건 다음과 같다.
1. 찜 목록을 누르면 찜 목록이, 리뷰 관리를 누르면 리뷰 관리가 보이도록 해야한다.
2. 페이지에 들어가면 기본적으로 찜 목록이 먼저 떠야 한다.
Link와 useNavigate 중 useNavigate를 사용했다. div 태그 전체를 버튼으로 만들어서, 한 줄을 누르면 페이지가 이동되도록 하고 싶었기 때문이다.
사용 방법
1. useNavigate를 import 해온다.
import { useNavigate } from "react-router-dom";
2. useNavigate 훅으로 navigate 함수를 취득한다.
const navigate = useNavigate();
navigate 함수의 첫번째 인자에 이동경로를 넣어서 사용하면 된다.
전체 코드는 다음과 같다.
import * as S from "./MyPageNav.styles";
import { BellIcon, SettingsIcon } from "@chakra-ui/icons";
import { useNavigate } from "react-router-dom";
const MyPageNav = () => {
const navigate = useNavigate();
const handleMoveToPath = (path) => {
navigate(`/mypage/${path}`);
};
return (
<>
<S.MyPageNavContainer>
<S.MyPageNavMenu onClick={() => handleMoveToPath("like")}>
<BellIcon mr="3" />찜 목록
</S.MyPageNavMenu>
<S.MyPageNavMenu onClick={() => handleMoveToPath("settingReview")}>
<SettingsIcon mr="3" />내 리뷰 관리
</S.MyPageNavMenu>
</S.MyPageNavContainer>
</>
);
};
export default MyPageNav;
handleMoveToPath 함수는 경로를 인자로 전달받아 /mypage/경로로 이동하게 해주는 함수다.
찜 목록을 클릭하면 찜 목록 페이지로 이동되고, 내 리뷰 관리를 클릭하면 리뷰 관리 페이지로 이동되도록 구현했다.
내가 만드는 페이지는 이렇게 구성되어 있고, 찜 목록과 내 리뷰 관리가 모두 마이페이지에 해당 된다.
따라서 경로가 mypage/like, mypage/review 이런 식으로 되어야 한다. 이를 위해서 useParams를 사용해줬다.
useParams란?
useParams는 react-router-dom에서 제공하는 Hooks 중 하나다. 파라미터 값을 URL을 통해 넘겨받은 페이지에서 사용할 수 있도록 해준다. (파라미터가 아닌, 현재 페이지의 pathname을 가져오는 것은 useLocation이다.)
사용 방법
1. import 해오기
import { useParams } from "react-router-dom";
2. useParams 정보를 변수에 저장하기
const { path } = useParams();console.log(path);를 해보면
위와 같이 현재 페이지의 parameter가 뜬다. 정상적으로 동작되고 있는 것이다.
현재 페이지가 like라면 찜 목록을, settingReview라면 리뷰 관리를 띄워줘야 한다.
아래와 같이 switch문을 통해 구현했다.
const renderMyPageContent = () => {
switch (path) {
case "like":
return <MyPageLike />;
case "settingReview":
return <MyPageSettingReview />;
default:
return <MyPageLike />;
}
};
이렇게 useNavigate와 useParams를 이용해 메뉴를 만들어봤다.
