진행하고 있는 프로젝트의 상세 페이지를 구현하기 위해 사용하는 useLocation에 대해 알게 되어 정리하고자 한다.
Link의 state
Link를 사용할 때 state를 통해 props를 전달해 줄 수 있다.
기본 형식은 아래와 같다.
<Link to="경로" state={{전달할 props명 : 전달할 props}}><Link to={`/${coin.id}`} state={{coinName : coin.name}}>useLocation
state로 전달한 데이터는 useLocation읕 통해 받아 사용할 수 있다.
location 객체를 반환하며 다양한 정보를 갖고 있다.
| 정보 | 내용 |
|---|---|
| pathname | 현재 주소의 경로 |
| search | 맨 앞의 ?를 포함한 쿼리스트링 값 |
| hash | 주소의 # 문자열 뒤의 값 |
| state | 페이지로 이동할 때 임의로 전달할 수 있는 props |
| key | location 객체의 고유값으로 페이지가 변경될때마다 고유값이 생성 |
전달한 props에 접근하려면 구조분해할당 문법을 사용하면 되는 것이다.
const {state} = useLocation();
타입스크립트에서의 useLocation
타입스크립트 환경에서 useLocation을 사용하면 기본 타입으로 any로 추론이 된다.
any를 사용하는 것은 타입스크립트의 가치가 없기 때문에 타입을 지정해주어야 한다.
다른 hook처럼 제네릭 형태로 타입을 지정해주었으나 오류가 발생한다.
현재 사용중인 react-router-dom v6 부터는 제네릭을 지원하지 않아 <> 대신 as를 사용해야 한다고 한다.
타입을 선언해주는 것은 맞지만 아래와 같이 as로 지정해주는 것이다.
인터페이스 대신 직접 key-value 형태로 타입을 지정해주어도 되지만 인터페이스를 놔두고 굳이 사용할 이유는 없을듯 하다.
interface LocationItfc {
state : {
coinName : string;
}
}
const {state} = useLocation() as LocationItfc;참고
