[React] - React Router

이 글은 React의 React Router에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요!

---

이미지 출처: www.google.com

React Router

React는 SPA 방식

React는 SPA 방식이다. SPA란 Single Page Application의 약자로 페이지가 1개인 어플리케이션을 말한다. 전통적인 웹 어플리케이션은 SPA와 반대인 MPA(Multi Page Application) 방식 여러 페이지로 구성되어 있었다. MPA의 동작 방식은 어떤 데이터를 요청할 때마다 페이지가 새로고침 되면서 서버로부터 자원(Resource)을 전달받고 렌더링 되는 방식이다. 반대로, SPA는 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가지는데, 대표적으로 React가 어플리케이션을 브라우저에 노출시키고, 이후 요청이 들어올 때마다 필요한 데이터만 보여주는 방식을 따른다.

 

🤔 SPA vs MPA 서로 비교해보자!

 

SPA란, Single Page Application 말 그대로, 페이지가 1개인 어플리케이션을 말한다.

 

SPA의 장점

- 필요한 데이터만 요청하는 방식이기 때문에, 전체 페이지를 업데이트할 필요가 없으며 처리속도가 빠르다.
- SPA 방식은 서버에게 정적 리소스를 한 번만 요청하며, 받은 데이터는 모두 저장해놓으므로 오프라인에서도 활용할 수 있다.
- 서버 사용 없이 개발을 시작할 수 있고, 디버깅 작업이 수월하다.


SPA의 단점

- 초기에 필요한 모든 정적 리소스를 요청하기 때문에 초기 구동 속도가 느린 편이다.
- 검색 엔진 최적화(SEO) 부분이 불리하다.

🤔 SEO 참고 링크
http://ivorycode.tistory.com/8?category=885826

 

MPA란, Multi Page Application 말 그대로, 페이지가 여러 개인 어플리케이션을 말한다.

 

MPA의 장점

- 완성된 형태의 파일을 서버로부터 전달받기 때문에, 크롤링하기에 적합한 방식이다. 하여, 검색 엔진 최적화(SEO)가 유리하다. (SPA와 정반대)

MPA의 단점

- 새로운 페이지를 이동할 때마다 화면이 깜빡이며 새로고침 된다. 이는 새로운 페이지를 요청할 때마다, 전체 페이지를 다시 렌더링 하는 작업을 거치기 때문이다.
- MPA방식은 프론트엔드, 백엔드 모두 밀접한 연관성을 가진다. 때문에 개발과정이 매우 복잡해질 우려가 있다.

 

Routing

앞선 내용에서 SPA에 대해 알아보았는데, 한 가지 의문점이 생긴다. SPA는 분명 페이지가 1개인 어플리케이션이라 했는데, 정말로 한 종류의 화면으로만 구성하는 것일까? 결론은 아니다. 홈페이지 로그인, 회원가입 로직(Logic)을 예시로 들어보자.

 

1. 메인 페이지에서 로그인 버튼 클릭
2. 로그인 화면 진입 후, 회원가입 버튼 클릭
3. 회원가입 페이지
4. 회원가입 완료 페이지

 

위의 예시만 봐도 벌써 페이지가 4페이지나 된다. 이렇게 존재하는 페이지들은 서로 다른 주소가 있어야 유저들이 진입하거나 사용이 가능하게 되는데, 이렇게 다른 주소에 따라 다른 뷰를 보여주는 것을 라우팅(Routing)이라고 하며, React-Router 라이브러리를 통해 SPA와 같이 페이지가 깜빡이지 않고 필요한 데이터를 가져오며, 페이지마다 각각의 주소를 가질 수 있게 된다.

 

React-Router 적용해보기

1. 프로젝트 생성 및 React-Router 라이브러리 설치하기

 

$ npx create-react-app study-router

 

프로젝트 생성

프로젝트가 잘 실행되는지 덤으로 확인해보자!

 

$ npx yarn start

 

프로젝트 실행

React 프로젝트가 잘 생성되었다.

프로젝트 생성을 마쳤으니 React-Router 라이브러리를 설치해준다.

 

$ yarn add react-router-dom

yarn 설치가 안 되어있다면
$ npm install react-router-dom

 

2. 예제 작성하기

 

Router를 적용해보기 위해 컴포넌트를 생성하고 예제 코드를 작성해야 한다. 아래의 예제 코드를 통해 Router를 적용하는 방법과 코드를 간단하게 리뷰해보겠다.

 

🤔 예제 파일 링크
https://github.com/ivory-code/studyReact

 

먼저 초기 파일 구성부터 파악해 보자.

index.js 파일

src 폴더
- Pages 폴더
- HomeScreen.js 파일
- TestRouterPage.css 파일

Routes.js 파일
- Styles 폴더
- HomeScreen.css 파일
- TestRouterPage.css 파일

 

 

예제 파일 컴포넌트

예제 파일에 HomeScreen, TestRouterPage라는 컴포넌트를 생성했다. 각각의 컴포넌트에는 특별한 기능 없이 테스트 문구만 적용한 상태이며, CSS파일엔 텍스트 색상만 변경해두었다.

 

index.js 파일과 Routes.js 파일

그리고 Routes.js 파일을 생성하여 React-Router 라이브러리를 적용하고, index.js에 Routes.js 파일을 import 해주었는데, 지금부터 Routes.js 코드를 자세히 들여다보자.

 

앞선 과정에서 라이브러리를 설치했으니, import 해주어야 한다.

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

 

import 과정을 마쳤으니, React-Router 라이브러리에서 제공하는 태그들과 기본적인 사용법을 배워보자.

 

1. <BrowseRouter>

<BrowseRouter>

BrowserRouter as Router

React-Router를 시작하는 코드다. 반드시 필요한 코드다!! Router를 적용할 때, 항상 최상단에 위치하는 태그인데, 예제 코드엔 <BrowserRouter> 태그는 보이지 않고 <Router> 태그가 자리하고 있다. import 코드를 보면, BrowserRouter 옆에 as Router라는 코드가 보이는데, <BrowserRouter> 태그를 앞으로 <Router> 태그로 간략하게 줄여서, 사용하겠다는 의미다. 앞으로 라우팅 코드를 디버깅할 때, <BrowerRouter> 태그가 보이지 않는다면, import 코드나 <Router> 태그를 찾아보자.

 

2. <Route>

<Route exact path="/" component={example} />

<BrowerRouter> 태그 안에는 <Route> 태그를 활용한다. 이 태그는 반드시, <BrowerRouter> 안에서만 작동한다. 이 태그는 경로를 설정해주는 코드다. <Route> 태그가 가진 속성 값은 크게 3가지 속성이 있다.

1. path
path는 주소를 의미한다. "/"라고 표기하면, React를 최초 실행하였을 때 출력되는 페이지로 설정된다. 사용하고 싶은 주소명을 적은 후에 해당 주소를 요청하게 되면, 그에 맞는 뷰(View)가 나타나게 된다.

2. component
설정한 path의 경로로 이동하였을 때, 실행되는 컴포넌트를 설정하는 속성이다.

3. exact
exact 속성이 추가되면 설정한 경로와 정확히 일치해야 설정한 컴포넌트로 이동하게 된다.

 

3. <Switch>

<Switch>

<Switch> 태그는 모든 Router 요소들을 반복하면서, 현재 위치와 일치하는 첫 번째 요소만 렌더링 해주는 태그다. 경로가 동일한 컴포넌트들이 있거나, 매칭 되는 경로가 없을 때, 식별하는데 도움이 되는 태그다. 만약 매칭 되는 경로가 없다면 우리에게 익숙한 '404 Not Found' 오류 페이지가 나타나게 된다.

 

이렇게 하여, 전반적인 Route 적용에 대해 알아보았다. 예제 코드에 따르면, 최초 페이지는 HomeScreen이 출력된다. 라우팅 기능이 잘 작동하는지 알아보기 위해, 주소창에 "http://localhost:3000/TestRouterPage"를 입력해 보았다.

 

라우팅 기능이 잘 작동하고 있다.

 

잘 작동 중이다. 추가적으로, 나중에는 다양한 기능을 구현하고 적용하여, 라우팅 기능을 응용할 수도 있다.

 

그런데, 주소창이 직접 입력하여 이동하고 있어서 라우팅 기능이 적용되는지 갑자기 의심이 든다. 그래서 Routes.js에서 TestRouterPage 코드를 주석 처리하고, 확인해 보았다. 

 

 

안되는데?

해당 주소로 이동하긴 했지만 처음에 확인되었던 문구가 보이지 않고, 터미널창에 경고문과 경고 위치를 알려주고 있었다. 여기서 알 수 있는 사실은 라우팅이 적용되지 않으면, 필요한 데이터를 출력하지 못한다는 사실이다. 꼭 기억하자.

 

💯 참고 자료 출처

'한영재'님 블로그

medium.com/@han7096/react-router-v4-%EC%A0%95%EB%A6%AC-e9931b63dcae

React Router V4 정리

'zerocho'님 블로그

www.zerocho.com/category/React/post/57a71751c90c5815005babc4

(React) React router(리액트 라우터)

'velopert'님 블로그

velopert.com/3417

react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG

'nayeon'님 블로그

velog.io/@nayeon/React-Router

React Router