리액트에서 useParams를 이용해 유동적으로 페이지 주소 지정하기

현재 진행중인 프로젝트에서

각 게시글 마다 상세 페이지를 보여주는 기능을 구현하게 되었다.

 

단순한 페이지 전환은 useNavigate로 처리하고 있었는데

UI는 동일한데 서버에서 반환하는 게시글 id마다 다른 데이터를 보여주기 위해서는

useParams에 대한 이해가 필요했다.

 

useParams는 딱 생긴 것 대로 리액트 훅이다.

설치는 그냥 react-router-dom을 설치하면 같이 설치된다.

아래는 설치 명령어다.

npm install react-router-dom

이렇게 설치하고나면 import를 해준다.

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

이제 사용 준비 끝!

 

useParams를 간단하게 알아보자면

URL을 통해 넘겨받은 파라미터 값을

해당 페이지에서 사용할 수 있게 만들어주는 리액트 훅이다.

 

예를 들어서 http://localhost:3000/feed/1 이라는 URL이 있고

제일 뒤에 붙은 1은 파라미터일때

해당 URL의 페이지에서 파라미터인 1을 데이터로 사용할 수 있다.

const { id } = useParams();

useEffect(() => {
    axios.get("http://localhost:8080/feed/" + id).then((res) => {

위 코드에서 나는 http://localhost:3000/feeddetail/:id 형태의 URL을 사용했고

:id 자리에 내가 원하는 feed의 id넘버를 부여해주었다.

그리고 파라미터인 id는 nest 서버에 get 요청을 보낼때 사용해주었다.

findOne(id: number) {
    const data = [
      { id: 0, title: '제목', content: '내용' },
      { id: 1, title: '제목1', content: '내용1' },
      { id: 2, title: '제목2', content: '내용2' },
      { id: 3, title: '제목3', content: '내용3' },
      { id: 4, title: '제목4', content: '내용4' },
      { id: 5, title: '제목5', content: '내용5' },
    ];
    return data[id];
}

위 코드는 nest 서버의 코드인데

역시 id값을 파라미터로 전달받았고

data 배열에서 id값을 이용해 인덱싱 한 데이터를 반환한다.

결과물은 서버에서 반환받은 title과 content 데이터를

리액트에서 적절히 데이터 바인딩 해주었다.