a 태그는 위험해!

a 태그

a 태그는 페이지를 이동시키면서 새로운 페이지를 로드합니다.
새로운 페이지가 로드되면 앱이 지닌 state 또한 초기화됩니다.

즉 a 태그 를 이용하여 라우팅을 변경할 때는 함수에서 관리하던 상태값들과 redux로 관리하던 전역 상태값이 모두 초기화됩니다.

Link

Link는 클릭 이벤트에 라우팅을 연결할 수 있습니다.

react-router-dom의 Link를 사용하면 상태값들을 라우팅되는 새로운 컴포넌트에 넘겨줄 수 있다!

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

function Example(){
	const [data, setData] = useState({id : 3, name: 'hoon'})
    return(
        <Link to ='/apple' state = {{data: data}}>apple</Link>
    )
}

이렇게 새로 라우팅하는 /apple 페이지에 state를 전송할 수 있습니다.
apple 페이지에서는 이를 어떻게 받을까요?

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

function Apple(){
	const location = useLocation();
  	const data = location.state?.data;
    return(
    	<h1>{data && data.name}</h1>
    )
}

이렇게 useLocation hook을 이용하여 example에서 전송한 state를 받을 수 있습니다 (신세계임).

useHistory

위의 Link는 클릭 이벤트로 라우팅을 했다면 useHistory는 함수 내에서 라우팅을 할 수 있습니다.

Link와 마찬가지로 라우팅 되는 페이지에 state를 전달할 수 있습니다:)

import { useState, useEffect }, React from 'react';
import { useHistory } from 'react-router-dom';

function Example(){
	const [data, setData] = useState({id : 3, name: 'hoon'})
    const changeRoute = () => {
    	const history = useHistory();
      	history.push({
        	pathname: "/apple",
          	state: {
            	data: data
            }
        });
    }
}

apple 컴포넌트에서 이를 받아 사용하는 것은 위 Link의 방식과 동일합니다.

졸업작품을 진행하며 문서를 읽으며 차근차근 진행했다면 충분히 배우고 적용할 수 있는 부분이였던 것 같은데 당장 구현에만 급급해 이런 좋은 기능을 지나친게 너무 아쉽다...🥲