[React] < button >으로 state 값을 자식 컴포넌트로 넘겨주기

구글링을 해보니까 주로 <form> 태그를 많이 사용해서 state 값을 넘기던데, 나는 버튼으로 페이지를 넘기면서 데이터를 전해줘야 해서 많이 난감했다. 어떤 것을 써서 넘겨줘야 하는지 모르겠어서 React Korea 커뮤니티에 글을 남겼더니 친절하신 분이 댓글로 알려주셔서 기록해놓기 위해 달려왔다.

 

 

 

버튼을 누르면서 + 페이지 이동도 하고 + state 값도 넘기는 방법!

<Link> 태그를 잘 사용하면 된다!

 

 

 

Cart.js

먼저 state 값을 보내는 쪽의 코드를 보자.

import React from 'react';
import {Link} from 'react-router-dom';

function Cart() {
    let sum = 0;

	// 여기서 sum 값에 값들을 더하는 함수들이 있다.
    
    return (
        <div>
            <div className='cartStyle'>
                <div>금 액 : {sum}</div><br />
                <Link to= {{
                    pathname: '/finalcart',
                    state: {sum},
                }}>
                    <div><button>결제하기</button></div>
                </Link>
            </div>
        </div>
    );
}

export default Cart;

 

 

여기서 <Link> 함수를 자세히 살펴보자.

<Link to ='/finalcart'>
	<div><button>결제하기</button></div>
</Link>

주로 다들 이런식으로 button의 부모 태그에 Link 태그를 걸어서 페이지 이동이 일어나도록 하는데 여기서 to={}를 사용함으로써 다른 데이터들도 보낼 수 있다.

 

 

 

내 코드처럼 state 말고 다른 속성들도 지정할 수 있다.

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

이런 식으로 여러 가지 데이터들을 페이지 넘기면서 같이 보낼 수 있는데 먼저 적혀있는 속성들에 대해서 알아보자면

 

 

 

• pathname: 링크로 넘어갈 경로를 나타내는 문자열
• search: 쿼리 매개 변수의 문자열 표현
• hash: URL에 넣을 해시
• state: location을 유지할 state 값

 

 

이렇게 있다. 여러가지 속성들을 더 넣을 수 있는 것 같지만 내가 다루는 부분은 state에 관한 내용이니 자세한 걸 더 보고 싶은 사람들은 아래 링크에 들어가서 참고하면 될 것이다.

https://reactrouter.com/web/api/Link/to-object?fbclid=IwAR0QiVIFFV6aekBbTOkqalWPFKZWb6tM1sX7NmCT_AVIms7B4SZx9czenNM

React Router: Declarative Routing for React

 

 

 

 

결론적으로 나는 아래 코드와 같이 state 값에 sum을 넣어서 결제하기 버튼을 누르면 '/finalcart'로 페이지 이동이 되면서 sum 값도 같이 넘겨주게 되는 것이다.

<Link to= {{
	pathname: '/finalcart',
	state: {sum},
}}>
	<div><button>결제하기</button></div>
</Link>

 

 

 

 

 

 

FinalCart.js

이제 마지막으로 /finalcart에서 sum 값을 받는 방법을 알아보자.

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

function FinalCart() {
    // useLocation()을 사용하여 Link에서 넘겨준 state 값을 받아온다
    const sum = useLocation();
    
    return (
        <div>
            <h3>최종 장바구니 화면입니다.</h3>
            <div>총 금 액 : {sum.state.sum}</div>
            <br />
            <hr />
            <div><button>결제하기</button></div>
        </div>
    );
}

export default FinalCart;

react-router-dom 라이브러리에 있는 useLocation()을 사용해서 Link에서 보낸 state 값을 받아오면 sum 값을 쓸 수 있다.

 

 

 

 

Link 태그로 페이지만 이동하는 것이 아니라 state 값도 넘겨줄 수 있다는 걸 새로 배웠다!

 

 

 

 

(전 블로그에서 2021.02.13 17:17에 작성한 글입니다.)