[TypeScript] useOutletContext unknown error

개인프로젝트를 하던 중에 만났던 에러인데 검색을 해도 잘 안나오길래 제가 해결한 방법을 쓰려고 합니다.

저 같은 초보자가 또 있을 수도 있기 때문에 ㅎㅎ;

 

Outlet에서 Context를 이런식으로 내리고 있었다.

<Outlet context={{ userInfo,userUid }} />

 

그다음 받는 쪽에서는 

const userInfo: UserType = useOutletContext().userInfo;

그냥 이렇게 쓰고 있었는데, 노트북에서 작업할 때는 안뜨던 에러가 데스크탑에서 pull을 받으니 에러가 뜨길래 발견했다.

검색을 해도 잘 안나오길래 react-router-dom 공식 페이지를 참조해서 에러를 해결하였다.

 

일단 context가 unknown 타입이기에 뜨는 에러였고, context 타입을 정해 줄 필요가 있었다.

export interface UserInfoContext {
    userInfo: UserType;
    userUid: string;
}

타입을 정리하고 context를 쓰는 곳에서는

const {userInfo} = useOutletContext<UserInfoContext>();
const {userUid} = useOutletContext<UserInfoContext>();

이런 식으로 쓰니 해결됐다!

 

타입스크립트의 기초를 충분히 숙지하지 못하고 일단 프로젝트를 만들면서 배워보자! 라고 생각했기 때문에 기본적인 에러들을 많이 만나는 것 같다. 근데 실제로 프로젝트를 만들면서 만나기 때문에 기억에 더 잘 남는 것 같기도 하다.

 

 

🎈 정답인지는 잘 모르겠으나, 방법이 잘못됐다면 답변 부탁드립니다!ㅎㅎ