페이지 이동할 때, 필요한 데이터를 전달해야 할 때가 많다. 예를 들어 피드의 게시물 클릭 시 게시물 상세 페이지로 이동한다거나, 유저 클릭 시 해당 유저 페이지로 이동하는 경우 등 많은 경우가 있다. 이럴 때 React Router Dom 을 사용해보자!

🚚 useNavigate() 데이터 전달하기

---

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

const navigate = useNavigate();

useNavigate() 훅을 import 한 후 navigate 함수를 선언한다.

navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } )

navigate 함수의 첫번째 인자엔 이동할 경로, 두번째 인자엔 state 속성으로 이동할 페이지로 보낼 데이터를 지정할 수 있다.

데이터를 전달해보자!

프로젝트를 할 때의 예시 코드이다. 게시물 이미지 클릭 시 해당 상세 페이지로 이동하기 위한 로직이다.

import { useNavigate } from 'react-router-dom';
...

const HomeFeed = () => {
  const navigate = useNavigate();
  ...

  // 포토존 이미지 클릭시 상세 페이지로 이동
  const handleDetailPost = ({ item }) => {
    navigate('/photodetail', {
      state: {
        image: `${item.author.image}`,
        username: `${item.author.username}`,
        accountname: `${item.author.accountname}`,
        itemImage: `${item.itemImage}`,
        itemName: `${item.itemName}`,
        link: `${item.link}`,
        createdAt: `${item.createdAt}`,
      },
    });
  };

  return (
    <FeedList>
      feedPost.map((item) => (
        <Feed>
          <FeedImg
            key={item.id}
            src={item.itemImage}
            alt=""
            onClick={() => handleDetailPost({ item })}
            onError={onErrorImg}
            />
        </Feed>
      ))}
    </FeedList>
  );
};

onClick 이벤트 함수를 콜백 함수 형태로 handleDetailPost 를 선언하고 item 매개변수를 전달한다.
handleDetailPost이 실행되면 이동할 페이지로 데이터를 보낸다.

📦 useLocation() 데이터 받기

---

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

const location = useLocation();

useLocation() 훅을 import 한 후 location 함수를 선언한다.

const key = location.state.key;
or
const userInfo = { ...location.state };

locaiton.state 로 전달 받은 파라미터를 가져온다.
이전 페이지에서 보낸 데이터의 키 값으로 접근하여 데이터를 가져올 수도 있고, 스프레드 연산자로 값을 가져올 수도 있다.

데이터를 받아보자!

import { useLocation, useNavigate } from 'react-router-dom';
...

const PhotoZoneCard = () => {
  const location = useLocation();
  const userInfo = { ...location.state };
  const navigate = useNavigate();

  // 해당 유저 페이지로 이동
  const handleProfile = () => {
    navigate('/otherProfile', {
      state: {
        accountname: `${userInfo.accountname}`,
      },
    });
  };

  ...

  return (
    <Wrap>
      <HeaderB />
      <FeedWrap>
        <PostCard>
          <User onClick={() => handleProfile()}>
            <UserProfile
              src={userInfo.image}
              alt=""
              onError={onErrorProfileImg}
            />
            <UserInfo>
              <UserName>{userInfo.username}</UserName>
              <UserId>@ {userInfo.accountname}</UserId>
            </UserInfo>
          </User>
          <PostImg
            className="detail-post-img"
            src={userInfo.itemImage}
            alt="상세이미지"
            onError={onErrorImg}
          />
          <PostTitle>{userInfo.itemName}</PostTitle>
          <PostCont>{userInfo.link}</PostCont>
          <PostDate>
            {userInfo.createdAt.substring(0, 4)}년&nbsp;
            {userInfo.createdAt.substring(5, 7)}월&nbsp;
            {userInfo.createdAt.substring(8, 10)}일
          </PostDate>
        </PostCard>
      </FeedWrap>
      <NavBar />
    </Wrap>
  );
};

스프레드 연산자로 값을 가져왔기 때문에 값을 저장했던 userInfo 변수를 통해 데이터를 뿌려준다.

useNavagate 와 useLocation 훅을 이용하여 간단하게 페이지를 이동하고 데이터를 전달할 수 있다. 위에 코드에 유저 클릭시 페이지를 이동하고 데이터를 전달하기 위해 또 useNavagate 를 사용한 것을 볼 수 있다! 그만큼 매우 많이 활용하고 있는 아주 유용한 기능이었다!

참고 :
useNavagate | ReactRouter
useLocation | ReactRouter