[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (1) 부제 :: Single Page Application이 무엇이고 어떻게 리액트에서 사용할까?

이 글은 리액트의 초심자들을 위한 글로 깊은 내용은 최대한 배제하고 쉬운 개념에 대해 작성하였고, 리액트의 진입 장벅을 낮추기 위한 요소로 어려운 내용이 생략되어 있을 수도 있습니다.

이 부분은 꽤나 핵심적이라고 생각하기 때문에 3부작으로 나눠서 설명해보도록 하겠다. 해당 글에 대해서 본인이 이 부분은 넘어가도 되겠다고 생각하는 부분은 넘어가서 확인하는 것을 권장한다. 하지만 길지 않은 글이므로 가볍게 읽는 것도 좋은 방법이다.

1. 1부 리액트가 페이지를 라우팅 하는 방법
2. 2부 Broswer History API를 사용해서 페이지 라우팅 하기
3. 3부 react-router-dom을 이용해서 페이지 라우팅 하기

---

이번 주제에 대해서 이야기를 하기 위해선 우선 페이지가 어떤 방식으로 사용자에게 보여지는지 알아야 한다.

우리가 일반적으로 웹 서비스를 이용할 때는 다음과 같은 방식으로 이루어 진다.

• 최초에 사용자가 웹 어플리케이션을 요청
• 서버에서 해당 웹 어플리케이션을 응답.
• 사용자는 서버에서 반환된 웹 어플리케이션을 받아서 특정 서비스 요청
• 서버는 또 특정 서비스를 새로운 페이지로 응답.

위와 같은 방식을 반복하는 것이 일반적인 웹 서비스의 절차이다.

이를 Multi Page Application 이라고 한다. 이는 서비스에 따른 서비스 페이지가 탄생하는 어플리케이션을 뜻한다.

하지만 React는 이런 방식을 권장하질 않는다.

그럼 리액트는 어떤 방식을 권장할까?

리액트는 SPA 라고 하는 Single Page Application을 권장한다.

MPA vs SPA

Multi page Application 과 Single Page Application을 비교하여 그림으로 보여주자면 다음과 같다.

위의 SPA에서는 필요시에는 Data를 요청하지만 다른 나머지 정보들을 페이지 자체라우팅으로 해결한다.

이를 위해서는브라우저 히스토리 API를 기반으로 구성해거나 또는 다른 방식을 이용하는데 이런 SPA를 React에서는 크게 2가지 방식을 사용할 수 있다.

• 브라우저 히스토리 API
• react-route-dom 방식

이 두 가지 방식을 모두 알아볼 것인데 일단 SPA에 대해서 먼저 확인해보자.

Single Page Application

SPA는 페이지는 최초에 1회만 로드되고 다른 정보를 요청할 때 페이지 전체가 로드되는 것이 아니라, 비동기적으로 일부분만 로드되는 방식이다.

이를 다른 말로 하면 최초 요청시 서버에서 결과를 로드하고, 다른 정보들은 클라이언트에서 라우팅한다고도 한다.

우리가 create-react-app으로 만들었던 app.js에서 다음과 같이 코드를 구성하면 SPA를 잠깐 경험할 수 있다.

위에 componentDidMount는 무시하고 코드를 봐보자. 간단히 설명하자면 onpopstate는 뒤로가기 버튼에 있는 스택에서 페이지를 빼온다고 생각하면 된다.

버튼을 클릭단다면 page1으로 로드하고 다른 버튼에는 page2로 로드하게 한다.

그럼 결과 화면이

이와 같이 localhost:3000/으로 들어오게 된다.

하지만 여기서 page1 버튼을 클릭하면 url이

이와 같이 변경되고 새롭게 페이지는 로드되지 않는다.

---

이렇게 간단하게 SPA를 하는 방법에 대해서 알아보았다.

다음 시간에는 제대로 브라우저 히스토리 방식을 구성해보고 react-route-dom방식을 사용해서 라우팅을 해보자.