React Router (SPA, Route, Link)

 

 

SPA

SPA는 Single Page Application의 약어입니다.

한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다.

 

요즘 웹에서는 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면

성능상의 문제가 발생 할 수 있습니다.

 

따라서 기존  html의 페이지 전환이 일어날 때마다 바뀌지 않는 부분까지 서버에서 새로 불러와서 보여 주어야 한다면 상당히 비효율 적입니다.

 

그래서 리액트를 사용하여 필요한 부분만 자바스크립트를 사용하여 업데이트해줍니다.

 

만약에 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 불러와 애플리케이션으로 사용할 수도 있습니다.

 

 

Route

다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다.

 

리액트 라우팅 라이브러리는 대표적으로 react-router이 있습니다.

 

• 프로젝트 생성 및 라이브러리 설치

npm install
npm run start
npm install --save react-router-dom          //react-router 라이브러리 설치
npm install --save react-router-transition   //react-router의 효과 라이브러리

 

• Route 컴포넌트로 특정 주소에 컴포넌트 연결

Route라는 컴포넌트를 사용하여 사용자의 현재 경로에 따라 어떤 컴포넌트를 보여 줄지 정의할 수 있습니다.

 

<Route path="주소" component={보여 줄 컴포넌트} exact />

 

 

 

먼저 App.js에서 Route를 import 설정을 해줍니다.

 

여기서 exact는 정확한 주소의 경로가 일치했을 때 해당 컴포넌트를 보여주도록 합니다.

 

 

Link

Link 컴포넌트는 클릭하면 다른 주소로 이동시켜 주는 컴포넌트입니다.

 

일반적으로 html에서 a 태그와 같이 페이지를 전환하는데, 리액트 라우터를 사용할 때는 이 태그를 직접 사용하면

안 됩니다.

 

이 태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버립니다.

 

Link 자체는 a 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장되어 있습니다.

 

<Link to="주소">내용</Link>

 

위 Route에서 주소 "/"는 Home 컴포넌트로 정의해 주었기 때문에 위 Link를 불러오면 Home 컴포넌트로 페이지 전환이 됩니다.