🐊 들어가며

<리액트를 다루는 기술> 13장 리액트 라우터로 SPA 개발하기를 공부하면서 정리한 내용입니다📚 중간에 모르는 것들은 따로 서치를 해서 공부했습니다.

🐊SPA란?

🍧SPA: 싱글 페이지 애플리케이션, 하나의 페이지로 이루어진 애플리케이션

멀티 페이지 애플리케이션

• 싱글 페이지 애플리케이션이 생기기 이전, 멀티 페이지 애플리케이션을 사용했습니다.
• 멀티 페이지 애플리케이션은 다른 페이지로 이동할 때마다 새로운 HTML를 받아옵니다.
• 정적인 페이지에는 적합하지만 사용자 인터랙션이 많고 다양한 정보를 제공하는 현대의 웹에서는 적합하지 않습니다.

싱글 페이지 애플리케이션

• 사용자와의 인터랙션이 발생하면 필요한 부분만 JS를 사용하여 업데이트하는 방식
• 새로운 데이터가 필요할 경우 서버 API를 호출하여 필요한 데이터만 새로 불러옵니다.
• HTML은 한번만 받아오고 이후에는 필요한 데이터만 받아와서 화면만 업데이트하기 때문에 현대의 웹에 적합합니다.

🐊리액트 라우터 기본 사용법

🍧라우팅 : 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것

설치하기

npm install react-router-dom

프로젝트에 라우터 적용

index.js 파일에 BrouserRouter 컴포넌트로 감싸면 됩니다. index.js

import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter>
    <App />
    </BrowserRouter>,
  document.getElementById('root')
);