React에서 Router state 사용

기본 사용법

router에서 navigate로 이동시 state에 객체 형태로 값을 넘겨서 주고 받을 수 있다. 

또한 parameter 방식과는 달리 따로 router url 뒤에 값을 설정해주지 않아도 되고, 

url에 넘기는 값이 노출 되지 않아서 좋았다. 

// 보낼때 
navigate(URL, {state: {id: "user1"}})

// 받을때 
import {useLocation} from "react-router";

const location = useLocation();
const id = location.state ? location.state.id : null; // <= "user1"

 

기존 목록에서 상세이동할때 요긴하게 쓰긴 했는데, 

장점만 있는 것은 아니라서 요구되는 서비스 형태에 맞춰 적절히 잘 (세상에서 제일 어려운..😑) 쓰면 되겠다. 

 

장점

1. url에 값을 노출 시키지 않고 값을 넘길 수 있다.

2. url 끝에 다수가 될 수도 있는 값이 붙지 않기 때문에, 혹시라도 pathname값을 계산해야하는 경우 일관되게 사용할 수 있다. 

3. Routes에서 path 값에 별도의 설정없이 바로 쓸 수 있어서 간편하다. 

4. 아마.. 그외에도 더 많은 장점이 있을 것이다...

 

단점

1. url로 바로 접근이 필요한 경우는 넘기는 state값이 없으므로 값을 알 수 없다.

예를들어 링크로만 상세페이지에 접근하는경우, 목록에서 게시글 아이디를 넘긴다고 가정했을때, 넘어가는 아이디 값 없이 바로 상세에 들어가게되면 받은 아이디가 없기 때문에 아무런 정보를 받을 수 없다. 

2. 같은 url인 경우 해당값을 useEffect를 통해서 감지해줘야 한다.

리액트 특정 문제점 중에 다른페이지로 이동했을때 기존 스크롤의 위치가 그대로 남아있어서, 모든 페이지를 감싸는 부분에  pathname의 변화를 감지해서 window.scrollTo(0, 0)을 넣어줬었다. 

이런 상태에서 게시글 상세의 경우 다음이나 이전 페이지로 넘어가려면 같은 url에 아이디 값만 바뀌는 케이스기 때문에, 

전체 선언된 윈도우 스크롤을 상단으로 올리는 스크립트가 먹질 않아, 이럴때는 아이디 값이 결국 state이기 때문에 이를 useEffect로 감지해서 업데이트 해줘야 한다.