개발 공부 기록하기/07. react.js & vue.js
[React-Router-Dom v6] useParam undefined 번거로움 해결
lannstark
2023. 8. 24. 18:25
useParam() 훅을 사용할 때 반환되는 값은 <string | undefined> 이다.
라이브러리 입장에서는 URI 경로에 있는 값을 가져올 때 존재하지 않을 수도 있으니, 당연히 undefined로 반환해야 하지만, 라이브러리를 사용하는 입장에서는 확실히 존재함을 보장할 수 있음에도 계속해서 undefined 아님 단언 (!
)을 사용하는 것이 번거롭다.
이럴 때 다음과 같은 방법을 사용할 수 있다.
const {key} = useParams() as { key: string };
이렇게 하면, key가 <string | undefined>가 아닌 string 임을 확실히 보장할 수 있다.
물런 매번 !
를 사용할 것인지 아니면 as
라는 위험할 수 있는(?) 형 변환을 사용할 것인지의 trade-off가 있을 것 같다.