노마드 마스터클래스 강의, react-router-dom에서 useLocation을 복습한 내용입니다.

react-router-dom

react-router-dom의 Link 컴포넌트의 to 속성으로 오브젝트 데이터를 전달할 수 있다.

<Link to={}>

to: 문자열

<Link to="/about?sort=name" />About</Link>

보통은 링크의 to 속성에 문자열을 담아 이동할 경로를 넣어주었다. 문자열은 href처럼 path/와 query?, hash# 등을 표시할 수 있다. 참고로 Link는 <a>태그로 렌더링된다.

to: 오브젝트

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

to를 object로 넘기게 되면 문자열 속성에 더하여 state 데이터를 전달할 수 있다. pathname, search, hash 속성은 위 문자열의 정보를 나누어 담은 것이고 state는 해당 location의 전달할 상태 데이터를 넣어줄 수 있다.

• pathname: A string representing the path to link to.
• search: A string representation of query parameters.
• hash: A hash to put in the URL, e.g. #a-hash.
• state: State to persist to the location.

to: 함수

<Link to={location => ({ ...location, pathname: "/courses" })} />

이번에 정리하면서 함수로 작성할 수 있다는 것을 처음 알게 되었다. location은 현재 위치 정보를 담고 있는 오브젝트이며 인자로 받아 pathname을 수정할 수 있다. location은 useLocation()으로 가져올 수 있는 현재 페이지 데이터이다.

Link to, state로 데이터 전달하기

예제에서 코인 상세페이지로 전달하는 것은 코인 이름이다.
이미 리스트 페이지에서 패치된 데이터 일부를 알고 있는데, 사용자는 상세 정보가 불러올 때까지 빈화면을 보아야 하기 때문에 state로 name을 전달하여 로딩되는 동안 일부 화면을 그려놓기 위함이다.

link state로 데이터를 전달하는 방법은 url에 데이터를 노출시키지 않고 전달할 수 있는 장점이 있다. 또한 오브젝트 형식으로 여러 데이터 타입을 전달할 수 있다.

하지만,
전달되는 데이터는 Link 오브젝트를 클릭할 시점에 상태가 생성이 되니 url로 다이렉트로 상세페이지에 접근했을 때, state가 undefined로 출력되거나 이로 인해 에러가 날 수 있으니, 예외처리를 잘 해주어야 한다.
어쩌면 이 특징을 잘 이용해서 잘못된 경로로 접근을 표시해 줄 수도 있을 것 같다.

---

출처

• Link | React Router