[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도 공부를 해봐야겠습니다. 화이팅!
Author And Source
이 문제에 관하여([React] ContextAPI를 사용한 Router 설정 + 타입에러(type error) 해결#2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@guinness5167/React-ContextAPI를-사용한-Router-설정-타입에러-해결2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)