10. SurveyPie 라우터 적용

 

10-1. react-router

Routing 이란?

주소에 맞게 적절한 페이지를 로드하는 것

 

http://example.com/list ----링크 클릭/페이지 이동----> http://example.com/detail

 

 

전통적인 방식의 웹 서비스에서 라우팅은, 서버에 요청하는 주소에 따라 서로 다른 페이지의 HTML을 보여주는 방식이였는데, SPA에서는 페이지가 여러 개가 아닌 싱글 페이지 어플리케이션이기 때문에 브라우저의 히스토리를 조작하는 방식으로 동작을 한다.

 

 

브라우저 history

브라우저는 페이지 이동에 대한 내용을 기록하기 위해서 히스토리라는 객체를 가지고 있다.

페이지 뒤로가기나 앞으로 가기를 할 수 있는 것도 다 history 덕분이다.

SPA에서는 history 객체가 제공하는 기능들을 활용해서 실제 다른 링크로 페이지를 이동하지는(=해당 주소로 HTTP 요청을 보내지는) 않았지만, 히스토리를 직접 쌓음으로써 페이지가 이동하는 것과 같은 효과를 줄 수 있다.

리액트에서는 이 기능을 react-router라는 라이브러리를 통해 제공하고 있다.

 

 

 

react-router

React에서 라우팅 기능을 구현한 라이브러리

=> 히스토리 객체를 통해 주소를 변경하고 변경된 주소에 대한 적절한 화면을 보여줄 수 있도록 도와준다.

 

 

 

10-2. react-router 적용

doc 페이지

https://reactrouter.com/en/main

Home v6.26.1 | React Router

 

설치 명령어 : npm install react-router-dom

 

index.js에 <BrowserRouter> 설정

 

아래 이미지에서 App.js에 <Route>로 두 개의 path를 설정함, 즉 두 개의 페이지를 만든 것

어떤 화면을 그릴 것인지 정의하는 부분이 Element 라는 props이다.
element에 들어가는 컴포넌트를 페이지로 인식해서 Route 영역에 그 컴포넌트를 렌더링을 하게 된다.

즉 Route라는 컴포넌트가 페이지가 떠야 하는 영역을 제한한 컴포넌트라고 볼 수 있다.

 

 

Navigation / Link() 기능

Link() 로 링크를 직접 걸 수 있다.

리액트에서는 a 태그를 사용하면 안 된다. 

a 태그를 사용하면 싱글 페이지 어플리케이션 안에서 페이지가 바뀌는게 아니라 서버로 HTTP 요청을 보내게 된다.

 

그래서 React에서는 react-router-dom에서 제공하는 {Link} 라는 컴포넌트를 이용하여 링크를 걸어주어야 한다.

 

<Link> 태그를 사용하면 HTTP 요청을 보내는게 없는 것을 확인할 수 있고, a 태그를 사용하면 http 요청 보내는 것 확인할 수 있다.

 

 

10-3. 라우터로 스텝 구분하기

 

 

다이나믹 세그먼트, 예시로 Route 태그에서 path 속성에 /teams/:teamId가 있을 때, 앞에 teams는 실제 path인데 뒤에 teamId는 path가 아니라 데이터로서 읽으라는 의미이다.

 

 

 

 

useNavigate()

클릭됐을 때 페이지 이동하기위한 hook