React useParams에 대해 알아보자 (+ 현재 페이지 pathname 가져오기)

1. useParams란?

useParams hook은 현재 URL에서 Route path와 일치하는 동적 파라미터의 값을 반환한다.

2. 사용해보기

useParams 는 주로 고정된 Route path가 상황에 따라 변화하는 값을 path에 넣어줘야 할 때 사용한다 .

ex) 쇼핑몰 상품 상세페이지, 유저 프로필 페이지 등

유저 프로필 페이지는 A, B, C라는 유저가 있으면 A유저의 프로필을 누르면 A 유저 프로필로 B라는 유저를 누르면 B 유저의 프로필로 이동해야 한다.

주소/profile/userA

👆이런 식으로 이동해야하고 이 뒤의 userA값을 토대로 서버에 요청을 해서 값을 받아와 화면에 나타내야한다.

 

PageRouter.jsx

function PageRouter() {
    return (
			<Routes>
				<Route path="/profile/:accountname" element={<UserProfile />} />
			</Routes>

우선 path에서 고정적으로 사용될 /profile/부분 뒤에 :<내가 정한 이름> 을 적어준다.

 

HomePost.jsx

<Link to={`/profile/${datas.author.accountname}`}>

우선 /profile/(여기) 부분에 동적인 값을 넣어준다.

홈 화면 글에서 프로필 부분 (프로필 사진과 계정이름 부분)을 클릭하면 그 글을 쓴 사람의 프로필 페이지를 이동해야한다. 이 부분은 글마다 그 글을 쓴 글쓴이의 accountname이 달라진다.

이제 저 부분을 어떻게 해서 다른 컴포넌트에서 활용할 수 있을까?

 

UserProfile.jsx

const { accountname } = useParams(); // 사용할거라고 선언
// 프로필 데이터 받아오기
useEffect(() => {
        axios
            .get(
                `https://주소/profile/${accountname}/follower`,
                {
                    headers: {
                        'Authorization': `Bearer ${getToken}`,
                        'Content-type': 'application/json',
                    },
                }
            )
            .then((res) => {
                // console.log(res);
                setFollowers(res.data);
                console.log(res);
                // console.log(followers);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

먼저 accountname을 useParams로 쓴다고 선언해주고 HomePost에서 받아온 계정이름을 accountname이 받아와 반환을 한다.

 

이런 식으로 앞서 받은 데이터를 토대로 path를 이동해야하고 그 path 값을 토대로 서버와 통신해 다른 페이지의 내용을 렌더링 해와야 할 때 사용하면 될 것 같다!

 

(+)

 

추가적으로 현재 pathname을 가져오고 싶다면

useLocation() 으로 가져올 수 있다!

import { useLocation } from 'react-router-dom';

const location = useLocation();

console.log(location.pathname)

 

혹시 틀린 부분이 많을지도 모르니 있다면 피드백 부탁드립니다 👍

더 알게 되는 내용이 있다면 추가적으로 수정할 예정입니다.

 

 

참고

https://reactrouter.com/en/main/hooks/use-params