react-router를 통한 리액트 싱글페이지 만들기 / 폴더 구조

폴더 구조

 

이것이 필수는 아님.

본인 취향껏 다양한 폴더구조 시도를 해보는 것이 좋음.

 

- 페이지는 페이지이다.

 

- 페이지간 검색되는 구성은 layouts

 

- 커스텀 훅은 hooks, 기타는utils

 

- 각 컴포넌트는 컴포넌트 폴더 아래 index.tsx(JSX)와 styles.tsx(스타일링)

 

 

App.tsx>

import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import LogIn from '@pages/Login';
import SignUp from '@pages/SignUp';

const App = () => {
  return <Switch>
    <Redirect exact path="/" to ="/login"/>
    <Route path="/login" component={LogIn}/>
    <Route path="/signup" component={SignUp}/>
  </Switch>
};

export default App;

 

Switch 란?

여러가지 선택지 중에 하나만 선택할 수 있는 것.

3가지 route중에 하나만 선택 되어야 함.

 

Redirect란?

다른 페이지로 돌려 주는 것.

주소가 '/' 로 끝나면 login으로 페이지를 넘겨줌.

 

SPA에서 페이지 넘기는 방법

 

❓SPA  란?

- Single Page Application (싱글 페이지 어플리케이션)의 약자이다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻이다. 전통적인 췝 어플리케이션의 구조는, 여러 페이지로 구성되어 있다. 유저가 요청할 대마다 페이지가 새로고침 되며, 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 말한다. html파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당한다.

 

 

싱글페이지라고 해서, 한 종류의 화면만이 있는 것이냐?

아니다. 예를 들어, 블로그를 만든다면, 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있다.

이런 식으로 다른 주소에 따라 다른 뷰를 보여주는 것을 '라우팅'이라고 한다. 

이것이 리액트 자체에는 이 기능이 내장되어있지 않는다.

따라서 우리가 직접 브라우저의 api를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다.

 

react-router는, 써드파티 라이브러리로서, 비록 공식은 아니지만, 가장 많이 사용되고 있는 라이브러리 이다.

이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다. 

게다가 서버 사이드 렌더링도 도와주는 도구들이 함께 딸려온다.

추가적으로 이 라우터는 react-native에서도 사용 가능하다.

 

react-router는 설치되어 있다는 가정하에,

아래는 그것을 설정하도록 도와주는 것

 

webpack.config.ts>

  devServer: {
    historyApiFallback: true, // react router

 

여기서 historyApiFallback 을 true로 설정해두면,

주소 뒤에 가짜 주소(Login, Signup) 입력해준다.

이 주소는 서버로 간다. 

 

Ligin/index.tsx>

import React from 'react';

const LogIn =()=>{
return(
    <div>로그인</div>
    );
}

export default LogIn;

 

SPA 의 단점

 

SPA의 단점은, 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다는 것이다.

유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문이다.

하지만, Code Splitting을 사용한다면, 라우트 별로 파일들을 나눠서 트래픽과 로딩속도를 개선할 수 있다.

 

리액트 라우터 같이 브라우저 측에서 자바스크립트를 사용하여 라우트를 관리하는 것의 잠재적인 단점은, 

자바스크립트를 실행하지 않는 일반 크롤러에선 페이지의 정보를제대로 받아가지 못한다는 점이다.

 

때문에, 구글, 네이버, 다음 등 검색엔진에서 페이지가 검색결과에서 잘 안타날수도 있다. 추가적으로, 자바스크립트가 실행될때까지 페이지가 비어있기 때문에, 자바스크립트 파일이 아직 캐싱되지 않은 사용자는 아주 짧은 시간동안 흰 페이지가 나타날 수도 있다는 단점도 있다. 이는, 서버사이드 렌더링을 통하여 해결 할 수 있다.