[React] ContextAPI를 사용한 Router 설정 + 타입에러(type error) 해결#2

바로 전 글에서 NextJS에서 ContextAPI를 사용해보는 시간을 가졌습니다.

NextJS에서는 알겠는데, React에서는?

React에서는 NextJS랑은 다르게 페이지 경로 설정을 따로 해줘야 합니다.

왜 이렇게 해야할까요?

이를 이해하기 위해서는 SPA에 대한 이해가 필요합니다.

SPA란, Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻으로 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다.

그렇다면 하나의 페이지에서 어떻게 다른 화면으로 넘어갈 수 있을까요?

새로운 화면에 따라 새로운 주소를 만들어 주면 됩니다. 주소가 있어야, 유저들이 북마크도 할 수 있고 서비스에 구글을 통해 유입될 수 있기 때문이죠.

다른 주소에 따라 다른 뷰 바로 이 개념이 Routing인데요. 리액트 자체에는 이 기능이 내장되어있지 않습니다. 따라서 우리가 직접 브라우저의 API 를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 합니다.

Routing은 관련 라이브러리인 react-router를 설치해서 구현할 수 있는데요.

import { Route, Switch } from 'react-router-dom';


<Switch>
  <Route path="/favorites" component={Search} />
</Switch>

위처럼 사용해주시면 됩니다.

오늘의 주제로 다시 돌아와서 React Route를 사용하면서 어떻게 ContextAPI를 사용할 수 있을까요?

아래의 코드를 살펴보도록 하겠습니다.

 | 1번 코드

<Switch>
  <GlobalContext.Provider value={value}>
    <Route path="/favorites" component={Search} />
  </GlobalContext.Provider>    
</Switch>

위처럼 단순히 NextJS에서처럼 직관적으로 사용하고 싶은 컴포넌트를 Provider로 감싸주기만 하면 될까요?

위처럼 하시면 안됩니다.

먼저, 주의하셔야 할 부분은 Switch구문의 특성부터 파악해야 합니다.
Switch의 자식은 오직 Route와 Redirect만 허용합니다. 따라서 Switch 안에 Provider를 사용하고자 한다면 아래와 같이 바꿔주셔야 합니다.

 | 2번 코드

<Switch>
  <Route path="/search">
    <GlobalContext.Provider value={value}>
      <Search />
    </GlobalContext.Provider>
  </Route>
</Switch>

저는 2번 코드처럼 구현할 때에 있어서 에러가 발생했는데요.

다음과 같이
Uncaught TypeError: Cannot read properties of undefined
라는 타입 에러가 발생했습니다.

  | 3번 코드
function Search({regStatus, location}) {
}

저는 Search 컴포넌트에서 매개변수를 받고 있었는데 이 부분을 코드 2번처럼 바꾸는 과정에서 문제가 생긴 것입니다. 이를 해결하기 위해 StackOverFlow를 찾아봤고 이 게시글을 통해 해결할 수 있었습니다.

useParams 훅을 이용해 매개변수를와 라우트를 매치해주고 qs를 통해 location을 가져오는 작업은 useLocation을 통해 해결할 수 있었습니다.

  | 4번 코드
function Search() {
  const { regStatus } = useParams();
  const location = useLocation();
}

이렇게 React Router에서도 ContextAPI를 사용하는 방법에 대해 알아보았습니다. 더 찾아보다보니
[출처] : https://esot3ria.github.io/programming/2020-10-02-react-context-route/

이처럼 기존 Route를 사용하듯이 ContextRoute도 동일한 맥락으로 사용할 수 있다고 하는데요. 2번 코드보다 가독성이 훨씬 좋아 위처럼 ContextRoute도 공부를 해봐야겠습니다. 화이팅!