[React History] 리액트 history.push()로 props, 값 보내기 / <Link> props 값 보내기

History.push() 로 값 전달하기

요약

history.push로 값 보내기	history.push로 보낸 값 받기
history.push(     pathname: '경로',     key: value );	1. location을 받아와야함. function 컴포넌트명 ({location}){     let 받은값 = location.key;     console.log(받은값);    // 결과:  value }

보낼 때 path지정 시 꼭 pathname을 사용해야한다. pathName, path 등 안됨!

---

우리가 아는 기존의 history.push()는 () 안에 '이동할 경로'를 적어주면 해당 경로로 이동한다.

history.push('/api/product'); ▶ localhost:3000/api/product 경로로 이동

 

이렇게 이동만 하는 것이면 상관이 없는데 가끔 state 값이나 어떤 props를 넘겨줘야할 때가 생긴다.

컴포넌트를 호출할 수도 없는노릇이고 어떻게해야할지 찾아봤는데 의외로 간단했다.

 

 

history.push()로 보내주는 곳 (버튼 클릭 시 이동하면서 값도 전달)

<button className="btn btn-danger" 
		onClick={()=>{history.push({
                        pathname:`/order/payment`,
                        props:{
                          buyingList : [{
                              pname: product.pname,
                              quantity: product.quantity,
                              price: product.price,
                              images: product.images
                          }],
			  totalPrice : product.price * product.quantity
                    	}
                	})
		}}
>
	구매하기
</button>

history.push( { } ) ← ()안애 { } 객체를 넣어준다.

pathname: `이동할 경로`,

전달할 값의 key : 전달할 값 ( 여기서 나는 ▶ props : buyingList )

 

이렇게해주면 되는데 전달할 값이 1개 이상의 객체형태면 위의 예시처럼

key: { } 또 이렇게 객체형태로 넣어주면 된다.

---

history.push() 로 값 보내준 후 접근하는 방법

history.push() 이후 이동된 페이지의 코드

import React, {useEffect, useState} from "react";

function Payment({location}) {

	const [buyingList, setBuyingList] = useState({});
    
    useEffect( ()=> {
	console.log('받아온 값 : ',location);
        console.log('location 받아온 값 : ',location);
        console.log('location.props : ',location.props);
        console.log('location.props.buyingList : ',location.props.buyingList);
        console.log('location.props.totalPrice : ',location.props.totalPrice);
        
        setBuyingList(location.props.buyingList);
    },[]);
    
    // ...생략
}

export default Payment;

history.push 이후 받아온 데이터는 location으로 받아온다.

 

어떤 식으로 받아와지나 보자. (CSS 입히기 전이라 구린 디자인 주의)

장바구니에 담은 상품 중 구매하기 개별 버튼을 누르면

해당 상품의 상품명, 수량, 가격, 상품이미지, 총 가격이 결제 페이지로 전달된다.

buyingList = 구매할 상품

    pname: 상품명,
    quantity: 구매할 수량,
    price: 상품 1개 금액,
    images: 상품 이미지

totalPrice : 구매할 상품 총 금액

 

이렇게 정보를 보냄

결제화면으로 이동했을 때 보내준 정보가 잘 도착했다.

 

location의 정보에는 이렇게 경로, 보내준 props가 들어있다.

접근하는 방법은 이렇게 location.보내준 key 값 → location.props

props 하위에도 정보가 더 있다면  → location.props.buyingList 나 location.props.totalPrice

이런식으로 내가 지정한 key값으로 찾으면 됨.

 

---

<Link>태그로 값 전달하기

Link로 값을 보내는 것 또한 동일한 방식이다.

<Link to={{
    pathname:`/order/payment`,
    props:{
      buyingList : checkProduct,
      totalPrice : totalPrice
    }
}}>구매하기</Link>

history.push는 함수 안에 바로 값을 넣어주지만

<Link>태그는 to={} 를 통해서 값을 보내준다.

해당 구매하기 버튼을 누르면 checkbox에 체크된 상품들만 구매페이지로 정보를 넘겨준다.