SPA란?
- SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다.
- 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다.
- 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있습니다.
기존방식
- 다른 페이지로 이동할 때 마다 새로운 html, 페이지 로딩 시 서버에서 리소스 전달받아 해석한 뒤 화면 보여줌
- 사용자에게 보이는 화면은 서버 측에서 준비.
- 유동적인 html 생성해주는 템플릿 엔진 사용
- 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생
- 바뀌지 않은 부분까지 새로 불러와 불필요한 로딩이 있어 비효율적
Single Page Application: 말 그대로 한 개의 페이지로 이루어진 애플리케이션
- 뷰 렌더링을 사용자의 브라우저가 담당.
- 애플리케이션을 브라우저에 불러와서 실행시킨 후 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 이요하여 업데이트
- 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션을 사용할 수 있다.
라우팅
- 다른 주소에 다른 화면을 보여 주는 것
- 싱글 페이지라고 해서 화면이 한 종류는 아니다. 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.
- 리액트 라우팅 라이브러리
SPA의 단점
- SPA의 단점은 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것입니다.
- 페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문
- 리액트 라우터처럼 브라우저에서 자바스크립트를 사용하여 라우팅을 관리하는 것은 자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집해 가지 못한다는 잠재적인 단점이 있다.
- 구글, 네이버, 다음 같은 검색 엔진의 검색 결과에 페이지가 잘 나타나지 않을 수도 있습니다.
- 자바스크립트가 실행될 때까지 페이지가 비어 있기 때문에 자바스크립트 파일이 로딩되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다는 단점도 있습니다.
- 이러한 문제점들은 다행히 나중에 배우게 될 서버 사이드 렌더링(server-side rendering)을 통해 모두 해결할 수 있습니다.
프로젝트 설치, 라이브러리 설치
- 해당 디렉토리에 yarn add react-router-dom
프로젝트에 적용
- 프로젝트에 리액트 라우터를 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다.
- 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줍니다.
라우팅 구현
- 처음 보여줄 Home 컴포넌트 생성, 웹 사이트를 소개하는 About 컴포넌트 생성
- Router 컴포넌트 사용해 현재 경로에 따라 다른 컴포넌트 렌더링
- 규칙 : <Route path="주소 규칙" component={보여 줄 컴포넌트}>
// App.js
import About from './About'
import Home from './Home'
import {Route} from 'react-router-dom'
...
return (
<div>
<Route path='/' component={HOME}>
<Route path='/about' component={ABOUT}>
</div>
)
/가 겹치는 문제
- 이 경우 about 페이지에 HOME 컴포넌트도 함께 렌더링 된다.
- /about 경로가 / 규칙에도 일치하기 때문
- Home 위한 Route 컴포넌트를 사용할 때 exact라는 props를 true로 설정
- <Route path='/' component={HOME} exact={true}>
Link 컴포넌트를 사용하여 다른 주소로 이동하기
- Link 컴포넌트는 클릭하면 다른 주소로 이동시켜 주는 컴포넌트입니다.
- 일반 웹 애플리케이션에서는 a 태그를 사용하여 페이지를 전환하는데요.
- 리액트 라우터를 사용할 때는 이 태그를 직접 사용하면 안 됩니다.
- 이 태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려 버리게 됩니다.
- 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링하게 되죠.
- Link 컴포넌트를 사용하여 페이지를 전환하면, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경해 줍니다.
- Link 컴포넌트 자체는 a 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장되어 있습니다.
<Link to="주소">내용</Link>
return (
<div>
<ul>
<li>
<Link to="/">홈</Link>
</li>
<li>
<Link to="/about">소개</Link>
</li>
</ul>
<Route path='/' component={Home}>
<Route path='/about' component={About}>
</div>
)
Route 하나에 여러 개의 path 설정하기
// Route 하나당 컴포넌트 설정
<Route path='/' component={Home} exact={true}>
<Route path='/about' component={About}>
<Route path='/info' component={About}>
// Route 하나에 여러 path 설정
<Route path='/' component={Home} exact={true}>
<Route path={['/about', '/info']} component={About}>
URL 파라미터와 쿼리
- 페이지 주소를 정의할 때 가끔은 유동적인 값을 전달해야 할 때도 있습니다.
- 이는 파라미터와 쿼리로 나눌 수 있습니다.
- 파라미터 예시: /profiles/velopert
- 쿼리 예시: /about?details=true
- 유동적인 값을 사용해야 하는 상황에서 파라미터를 써야 할지 쿼리를 써야 할지 정할 때, 무조건 따라야 하는 규칙은 없습니다.
- 다만 일반적으로 파라미터는 특정 아이디 혹은 이름을 사용하여 조회할 때 사용하고, 쿼리는 우리가 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 사용합니다.
URL 파라미터
URL 쿼리
- location 객체
- location 객체 안의 search값에서 쿼리 조회 가능
- 라우트로 사용된 컴포넌트에게 props로 전달.
- 웹 애플리케이션의 현재 주소에 대한 정보를 가지고 있다.
- localhost:3000/about?detail=true 주소 일 때
{
"pathname": "/about",
"search": "?detail=true"
"hash" : ""
}
- 문자열 형태로 이루어져 있다. 특정 값을 불러오기 위해 문자열을 객체 형태로 변환
- About.js
- localhost:3000/about?detail=true 로 들어갔을 때
const query = qs.parse(location.search, {
ignoreQueryPrefix: true,
});
const showDetail = query.detail === 'true';
- ignoreQueryPrefix: true, 를 통해 앞의 ?를 제거
- query는 "detail=true"
서브 라우트
- 서브 라우트는 라우트 내부에 또 라우트를 정의하는 것을 의미합니다.
- 이 작업은 그렇게 복잡하지 않습니다.
- 그냥 라우트로 사용되고 있는 컴포넌트의 내부에 Route 컴포넌트를 또 사용하면 됩니다.
리액트 라우터 부가 기능
history - 클래스형 컴포넌트
- history 객체
- 컴포넌트에 match, location과 함께 전달되는 props 중 하나
- 컴포넌트 내에 구현하는 메서드에서 라우터 API 호출 가능
- ex) 뒤로가기, 화면 전환, 다른 페이지 이탈 방지
withRouter 컴포넌트
- 라우터로 사용된 컴포넌트가 아니어도 match, location, history 사용 가능
- 주소 경로가 없는 컴포넌트도 사용이 가능하다.
- 라우트 기능이 없지만 withRouter를 사용하여 location, match, history 사용
- textarea를 통해 location, match를 확인. 버튼을 이용해 histroy 기능 확인 가능하다.
- export 할 때 withRouter(WithRouterSample)로 감싸준다.
- match객체의 param은 현재 자신을 보여 주고 있는 라우트 컴포넌트를 기준으로 match가 전달.
- Profile과 Profiles에 넣어보고 비교
Switch 컴포넌트
- 여러 Route를 감싸서 그 중 일치하는 단 하나의 라우터만 렌더링
- 모든 규칙과 일치하지 않을 때 Not Found 페이지도 구현 가능
NavLink
- 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일, CSS 클래스를 적용할 수 있는 컴포넌트
- NavLink가 활성화되어 스타일을 적용할 때는 activeStyle을, CSS 클래스를 적용할 때는 activeClassName을 props로 넣어 준다.