프리프로젝트- Link에서 props를 주는 방법

프로젝트 배포에 들어가기 전에,

 

최종테스트를 하며 질문의 view 숫자가 미친듯이 올라가는 것을 발견했다.

 

API를 통해서 question의 정보를 받아올 때마다, 질문의 viewCount가 증가하는 구조인데

질문 수정, 타임라인 페이지를 이동한 때마다, API를 통해서 question의 정보를 받아오기 때문에 view의 속도가 빠르게 증가하였다.

 

Question 페이지와 editQuestion, Timeline 페이지는 별개의 페이지이기 때문에,

props로 정보를 전달하지 못하여 그냥 서버에서 정보를 받아오는 식으로 해결하였다.

 

서버의 정보를 받는대신, 기존의 방식을 활용하는 방법은 내 생각으로는 2가지가 있었다.

 

1. 전역 상태 관리

2. Link태그로 props 전달하기

 

1번의 방식을 사용하는 것이 더 좋을 것 같다고 생각했지만, 당장 배포를 앞두고 있어 적용하기 어려운 상태이고

관리해주어야할 전역 상태들이 너무 많아질 것 같아서

 

직관적으로 전달할 수 있는 2번 방식을 선택하였다.

 Link태그로 props 전달하는 것을 생각도 해본적이 없어서 무작정 검색을 통하여 방법을 찾았다.

 

해결

<li>
<Link
	to={`/timeline/${targetId}/${
		mode === 'question' ? 0 : data.answerId
	}`}
	state={data}
>
	<AiOutlineFieldTime className="timeline__icon" />
</Link>
<Tooltip>Show activity on this post.</Tooltip>
</li>

Link 태그 안에서 state = {주고 싶은 정보}를 넣어주고

 

useLocation()을 이용하여 Link태그로 전달한 state를 받아올 수 있었다.

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


const location = useLocation();
    
    // Link로 받은 상태 저장
	useEffect(() => {
		if (Number(answerId) > 0) {
			setAnswer(location.state);
		} else {
			setQuestion(location.state);
		}
	}, []);

 

 

코드를 수정하면서, 불필요하게 서버 통신을 남발하고 있다는 거를 깨달았고, view 값 또한 더 이상 증가하지 않았다.

문제를 해결하기 위해서는 다양한 방법이 존재하는 것을 느꼈다.

 

 

 

출처: https://velog.io/@33bini/React-Link%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0

https://v5.reactrouter.com/web/api/Hooks/uselocation