.png)
Router 기능을 배운 후 한동안 관심을 가지지 않고 있다가, 오늘 회원가입/로그인 기능을 구현하면서 사용하는데 조금 버벅거렸다. 역시 사람은 망각의 동물이라고.. 다시 써먹으려고 하니 낯선느낌이 있었다. 좀 더 오랫동안 기억하기 위해 Router의 기본적인 개념과 기능, 그리고 history.push() 기능에 기록해둔다.
1️⃣ Router란?
SPA(Single Page Application)는 React의 중요한 특징이다. SPA는 단어 그대로 페이지가 1개인 어플리케이션이다. SPA는 특정페이지(새롭게 넘어갈 페이지)를 컴포넌트로 미리 세팅하여, 그 페이지로 넘어갈때마다 새로운 HTML페이지를 받을 필요가 없이 동일 페이지에서 세팅해둔 컴포넌트를 펼쳐 보여준다(랜더링). 이러한 SPA를 가능하게 하는 것이 바로 Router이다.
2️⃣ Router 사용하기
Router를 구현하기 위해서는 별도의 Route js 파일을 만들어주어야 한다.
해당 파일 내부에는 페이지별 path값(URL), component값 설정 / component값 import를 해준다.
.png)
실제 파일을 예시로 살펴보면 가장 먼저 메인 Routes component를 만들어준다.
- 이동하려는 페이지를 경로 및 component값을 설정하고 import한다.
- Routes component의 render 내부에 Router 한 번 감싸고, 실제로 이동하는 페이지들의 URL(경로)과 componenet 값을 Switch로 한번 더 감싸준다.
.png)
- 설정한 Routes component는 index.html에 render하는 최종페이지가 된다.
(모든 페이지를 모두 담은 componenet를 Single Page로 랜더링하는 것이다.)
.png)
- 페이지로 연결하는 요소를 componenet형태로 페이지의 url과 함께 적어준다.
(예시에는 'Link'가 path로 설정한 '/main-doyoung'으로 이동하는 componenet가 된다.) - 설정한 path로 연결하는 component에는 반드시 component를 react-router-dom에 import한다.
(구현 방법은 간단한 편이다!)
3️⃣ history.push()
history.push()는 함수를 호출하여 Router로 설정한 링크로 이동하는 기능이다. withRouter를 통해 구현되며 history 객체에 값을 준다. 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 사용한다.
- withRouter: 라우터로 호출된 component가 아니더라도 페이지의 match, location, history 객체에 접근할 수 있도록 하는 component다.
- history 객체: 페이지의 기록을 의미하며, 라우터로 직접 접근할 수 있도록 한다.
즉, history.push()기능을 통해 routes 경로로 설정한 페이지로 이동 시, component를 생성해주지 않아도 되고, 이동할 path를 push의 인자로 적어주기만 하면된다.
.png)
예문을 보면 if의 true결과로 '/main-doyoung'이라는 이동하는데 history.push로 간단하게 구현하였다. history.push 기능을 사용하는 조건은 해당 페이지에 두가지를 설정하면된다.
- import { withRouter } from 'react-router-dom';
- export default withRouter(LoginDoyoung);
route 경로로 설정한 페이지로의 이동을 간단하게 하는 기능도 있지만 (부모-자식 관계가 아닌) 페이지 이동 시 props 전달도 가능하게 해준다. 부분에 대해 상세히 알고싶다면 해당페이지를 참고하면 된다.
자료 출처
