Chapter 13 : 리액트 라우터로 SPA 개발하기

🎯 SPA란?

• 기존 방식
  • 다른 페이지로 이동할 때 마다 새로운 html, 페이지 로딩 시 서버에서 리소스 전달받아 해석한 뒤 화면 보여줌
  • 사용자에게 보이는 화면은 서버 측에서 준비.
  • 유동적인 html 생성해주는 템플릿 엔진 사용
  • 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생
  • 바뀌지 않은 부분까지 새로 불러와 불필요한 로딩이 있어 비효율적
• Single Page Application : 말 그대로 한 개의 페이지로 이루어진 애플리케이션
  • 뷰 렌더링을 사용자의 브라우저가 담당.
  • 애플리케이션을 브라우저에 불러와서 실행시킨 후 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 이요하여 업데이트
  • 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션을 사용할 수 있다.

라우팅

• 다른 주소에 다른 화면을 보여 주는 것
• 싱글 페이지라고 해서 화면이 한 종류는 아니다. 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.
• 리액트 라우팅 라이브러리
  • 리액트 라우터
  • Next.js

1. SPA 단점

• 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다.
  • 페이지 로딩 시 사용자가 실제로 방문하지 않을 수 있는 페이지의 스크립트도 불러오기 때문
  • 코드 스플리팅을 사용해 라우트별로 파일들을 나누어 트래픽과 로딩 속도 개선
• 일반 크롤러가 페이지의 정보를 제대로 수집해 가지 못한다
  • 브라우저에서 자바스크립ㅌ를 사용하여 라우팅을 관리하기 때문에
  • 서버 사이드 렌더링으로 해결

🎯 라우터 프로젝트 준비 및 기본적인 사용법

1. 프로젝트 설치, 라이브러리 설치

• 해당 디렉토리에 yarn add react-router-dom

2. 프로젝트에 적용

• import { BrowserRouter } from 'react-router-dom'
• src/index.js에서 React.strictMode 대신 BrowserRouter 컴포넌트로 감싸준다.
• BrowserRouter 컴포넌트 : HTML5의 history API를 이용하여 페이지를 새로고침하지 않아도 주소를 변견하고, props를 쉽게 조회, 사용 가능하게 해준다.

3. 라우팅 구현

• 처음 보여줄 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}>

4. Link 컴포넌트 사용하여 다른 주소로 이동하기

• 일반 웹 페이지 : a 태그 사용
• 리액트에서는 a 태그 사용하면 안된다.
  • 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 가지고 있는 상태들을 모두 날려 버린다.
  • 렌더링된 컴포넌트들도 모두 사라지고 처음부터 렌더링한다.
• Link 컴포넌트
  • LiNK 컴포넌트를 사용하면 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태로 HTML5 History API를 이용하여 페이지의 주소만 변경해 준다.
  • Link 컴포넌트 자체는 a 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장되어 있다.

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

🎯 SPA란?

🎯 SPA란?

🎯 SPA란?

🎯 SPA란?