React 라우팅

SPA Single Page Application

서버에서 큰 APP을 받아오고 url에 따라서 어떤 페이지를 보여줄지 결정

SPA 라우팅 과정

브라우저에서 최초에 / 경로로 요청하면

React Web APP 을 내려주고

내려받은 React App에서 / 경로에 맞는 컴포넌트르 보여준다.

React App에서 다른 페이지를 이동하는 동작을 수행하면,

새로운 경로에 맞는 컴포넌트를 보여준다.

React-router

npm i react-router-dom 

cra에 기본 내장된 패키지가 아니다.

react-router-dom은 facebook의 공식 패키지가 아니고 가장 대표적인 

라우팅 패키지이다.

예제

npx create-react-app react-router-example

npm i react-router-dom

npm start로 브라우저를 띄우고

특정 경로에서 보여줄 컴포넌트를 준비한다.

'/' => home 컴포넌트

'/profile' => profile 컴포넌트

'/about' => about 컴포넌트