) 실전 리액트 프로그래밍 스터디1장 - 04 단일 페이지 애플리케이션

단일 페이지 애플리케이션 만들기

페이지 전환은 단일 페이지 애플리케이션 방식(single page application , SPA) 으로 개발하는 것이 정석이다.

SPA 단일페이지 애플리 케이션 방식

최초 요청시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 것

전통적인 방식은 페이지 전환마다 렌더링 결과를 서버에서 받기 때문에 화면이 깜빡이는 단점이 있었다.
단일 페이지 방식은 클라이언트 자체에서 라우팅을 하기 때문에 자연스럽게 동작한다.

브라우저 히스토리 API

단일페이지 애플리 케이션 (이하 SPA)이 구현이 가능하려면 두가지 기능이 필요하다.
(단, 브라우저는 서버로 요청을 보내지 않아야 한다)

1. 자바 스크립트에서 브라우저로 페이지 전환요청을 보낼수 있다.
2. 브라우저의 뒤로가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할수 있다

이러한 조건을 만족하는 브라우저 API는. pushState, replaceStatae 함수와 popstate 이벤트이다. 브라우저에는 히스토리에 state를 저장하는 스택이 존재한다.

import React,{Component} from ‘react’;

class App extends Component {
state= {
pageName: ‘’, },  
componentDidMount() { 
window.onpopstate= event => {
this.onChangePage(event.state);};}    — 1 
onChangPage = pageName => {
this.setState({pageName}) };
onClick1 = () => { const pageName = ‘page1’;
window.history.pushState(pageName, ‘ ’, ‘/page1’);
this.onChangePage(pageName) }
onClick2 = () => { const pageName = ‘page2’;
window.history.pushState(pageName, ‘ ’, ‘/page2’);
this.onChangePage(pageName) }

render() {
const  {pageName} = this.state; 
return ( 
<div> 
	<button onClick={this.onClick1}>page1</button>
	<button onClick={this.onClick2}>page2</button>
	{!pageName && <Home /> }
	{pageName === ‘page1’ && <Page1 />}
	{pageName === ‘page2’ && <Page2 />}
</div>
)}}

onpopstate 이벤트가 발생하면 페이지를 전환한다는 의미로 pageName 상태값을 수정한다.

react-router-dom 사용

설치 - npm install react-router-dom

사용- import {BrowserRouter,Route,Link} from ‘react-router-dom’
한곳에서 관리를 한다. 대부분 app.js 또는 index.js 부분에서 많이 사용한다.

기본 모양

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import MapPage from './MapPage/MapPage';
// import Main from './Pages/Main/Main';

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/map" component={MapPage} />
        {/* <Route exact path="/" component={Main} /> */}
      </Switch>
    </Router>
  );
};
export default Routes;

이런 식으로 생겼다 import의 두줄은 꼭 필요하고
나머지 import들은 페이지 전환을 위해서 가지고 와야 하는 import이다.
Router > Switch>Route 순으로 되어 있다

index.js에서도 App.js또는 index.js 부분을 Routes로 수정해줘야 한다.
index.js 부분

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
import { ThemeProvider } from 'styled-components';
import Theme from './styles/Theme';

ReactDOM.render(
  <ThemeProvider theme={Theme}>
    <Routes />
  </ThemeProvider>,
  document.getElementById('root')
);

위의 예시는 ThemeProvider도 사용한 예시이다.

버튼으로 페이지를 전환할때는 -제공하는 Link 컴포넌트를 사용한다. to로 경로의 주소를 입력한다

<Link to=‘/’></Link>

Route : Route컴포넌트를 이용해 각 페이지를 정의한다. path속성값으로 주소를 입력 받으며
Component 속성 값이 가리키는 컴포넌트를 렌더링 한다.

<Route path= ‘/main’ component={main} />

path앞에 exact가 붙는데 정확하게 주소를 입력받을 경우 필요하다.

react-router-dom 을 많이 사용하다보니 앞의 사례보다
react-router-dom이 더 쉬운것 같고 익숙하다.