[React-Router-Dom v6] useParam undefined 번거로움 해결

useParam() 훅을 사용할 때 반환되는 값은 <string | undefined> 이다.

라이브러리 입장에서는 URI 경로에 있는 값을 가져올 때 존재하지 않을 수도 있으니, 당연히 undefined로 반환해야 하지만, 라이브러리를 사용하는 입장에서는 확실히 존재함을 보장할 수 있음에도 계속해서 undefined 아님 단언 (!)을 사용하는 것이 번거롭다.

이럴 때 다음과 같은 방법을 사용할 수 있다.

const {key} = useParams() as { key: string };

이렇게 하면, key가 <string | undefined>가 아닌 string 임을 확실히 보장할 수 있다.

물런 매번 ! 를 사용할 것인지 아니면 as 라는 위험할 수 있는(?) 형 변환을 사용할 것인지의 trade-off가 있을 것 같다.