React 페이지 간 props 전달

sam_il·2022년 8월 8일

✅ 프로젝트 진행 중 페이지 이동 시 props로 state를 전달해주어야 하는 상황이 발생했다.
(블로그 프로젝트 중, 블로그 리스트에서 특정 블로그 클릭 시 해당 블로그명, 이미지, 색상 전달해야 하는 상황)

페이지 간 props 전달

routing으로 특정 페이지에서 다른 페이지로 이동할 때 props를 넘겨 주는 간단한 방법이 있다.
( Function Component 기준 )

❗ 검색한 글로 코드를 작성해도 오류가 발생했다. 찾아보니 v6부터 useHistory는 useNavigate로 변경해서 사용해야 했다.

(아래 글은 useNavigate로 작성한 예시이다.)

useNavigate, useLocation hook 사용하기

두 가지의 hook으로 페이지 간 props 전달이 가능하다.

일반적 페이지 이동 코드

import { useNavigate } from "react-router";

const navigate=useNavigate();
<button onClick={()=>{navigate("/..")}}/>

import { useNavigate } from "react-router";

const navigate=useNavigate();
<button onClick={()=>{
	navigate("/..", {state:{props:props}})
}}/>

import { useLocation } from "react-router";

const location = useLocation();
const item = location.state.props;

Link, useNavigate

Link와 v6에서 업데이트 된 useNavigate를 정리해보자.

Link와 useNavigate는 화면 이동을 위해 사용된다. 두 가지의 차이점에 대해 알아보았다. (라이브러리 설치 필요)

npm i react-router-dom

1. Link

<Link to="/path">link 이동</Link>

클릭하면 바로 이동하는 로직을 구현할 때 사용한다.
ex) 상품 리스트에서 상세 페이지 이동 시

2. useNavigate

import { useNavigate } from "react-router";

const navigate=useNavigate();
<button onClick={()=>{navigate("/path")}}/>

페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate를 사용한다.

ex) 로그인 버튼 클릭 시, 회원가입 되어 있는 사용자 (Main 페이지로 이동) / 회원가입이 되어 있지 않은 사용자 (SignUp 페이지로 이동)

🍀