티스토리 뷰

문제 상황

react-router-dom 패키지를 사용하면서 Link 태그를 통해 다른 url로 이동하는 버튼을 만들어 주었다.

여기서 Link 태그의 state 속성을 사용해 이동하는 페이지에 특정 데이터를 전달하는 코드를 작성하였다.

이동한 페이지에서 Location과 관련한 값을 useLocation() Hook을 활용하여 받아오도록 했다.

필요한 데이터는 pathname과 state다.

 

여기서 문제가 발생했는데 기존에 타입을 지정하는 방식대로 pathname과 state를 지정해주었을 때 타입과 관련한 에러가 발생했다.

interface {
	pathname: string;
    state: {
    	id: string;
    }
}

 

해결방법

여러가지 구글링을 해본 결과 아래의 사진과 같이 타입을 Generic 하게 선언해주는 방법도 사용해보았지만,

에러 메세지를 보았을 때, 이 방식으로  타입을 선언하는 방식은 존재하지 않는 것 같다.

React Router v6 공식문서를 보았을 때 state의 타입 자체가 state의 타입 자체가 unknown으로 정의되어 있어서 내가 정의한 타입이 적용되지 않았고, Location 타입이 Generic 하게 만들어지지 않았기 때문에 다른 블로그에서 본 내용도 적용할 수 없었던 것 같다.

https://reactrouter.com/docs/en/v6/hooks/use-location

location을 console로 찍어봤을 땐 원하는 값이 잘 들어있는데...

왜 타입을 Generic이 아닌 그냥 unknown으로 해두었을까...

Link의 Props를 통해 값을 전달하는 것을 막고 싶었으면 저 state자체를 없앴을 텐데...

 

나는 아래 코드와 같이 as를 통해 타입을 단언해주었다.

 

내가 사용한 코드에서는 state의 값이 as로 타입을 단언하는 방식이 아닌 것 같지만

내가 작성한 코드의 state는 id말고는 다른 데이터를 사용하지 않기 때문에 타입을 단언해서 사용하는 것도 하나의 방법이 될 수 있겠다는 생각을 했다.

'Vue&React' 카테고리의 다른 글

Axios Interceptors 적용해보기  (3) 2022.09.23
[Vue.js] computed와 method  (0) 2022.09.02
[Vue.js] Sass 사용시 변수를 전역에서 사용하기  (0) 2022.07.25
[React] Image Preloading  (0) 2022.07.15
[React] React.FC<>  (0) 2022.07.11
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함