개념 - React Router

React Router 사용

1. 먼저 브라우저의 url과 리액트앱을 연결하는 기능을 하는 < BrowserRouter > 컴포넌트로 App 컴포넌트가 return하는 부분을 감싸준다.

function app () {
  return (
    <BrowserRouter>
     <div className = "app">
    	...
     </div>
    </BrowserRouter>
}

2. 페이지의 주소가 변하면 변할 부분을 < Routes > 로 감싸준다

function app () {
  return (
    <BrowserRouter>
     <div className = "app">
    	...
      <Routes>
      </Routes>
     </div>
    </BrowserRouter>
}

3. 변할 페이지 컴포넌트를 < Route > 로 작성한다 url 부분은 path 이며 이동하는 컴포넌트는 element 이다

function app () {
  return (
    <BrowserRouter>
     <div className = "app">
    	...
      <Routes>
       <Route path="/" element={<Home/>}> // 미리 만들어둔 Home 컴포넌트를 가져옴
       <Route path="/new" element={<New/>}>
      </Routes>
     </div>
    </BrowserRouter>
}

4. SPA인 리액트의 장점을 이용하기 위해 a 태그가 아닌 < Link > 태그를 이용해 설정한 링크로 가는 버튼을 만든다. Link 안쪽에 to를 주어 이동할 url을 적는다.

function app () {
  return (
    <BrowserRouter>
     <div className = "app">
    	...
      <Routes>
       <Route path="/" element={<Home/>}>
       <Route path="/new" element={<New/>}>
      </Routes>
	 <Link to ="/">HOME 이동</Link> // HOME 이동 이라는 글자가 나오고 클릭하면 / url로 이동
     <Link to ="/new">NEW 이동</Link> // NEW 이동 이라는 글자가 나오고 클릭하면 / url로 이동
     </div>
    </BrowserRouter>
}

페이지 라우팅

어떤 경로를 달라는 요청에 따라 서버가 알맞은 페이지를 주는 것을 페이지 라우팅 이라고 한다.

html 페이지는 MPA 방식이다. MPA란 Multi Page Application 인데 페이지 전환시 화면이 깜빡이고(새로고침) 서버에서 데이터와 홈페이지를 조립해서 주는 방식. 느리다

리액트는 SPA 방식이다. SPA란 Single Page Application 인데 사이트에 보여지는 화면은 클라이언트가 만들고 서버에서 받을 데이터들은 비동기로 처리하여 받아온다. 화면은 빨리 만들어지고 데이터는 로딩이 걸린다.

리액트는 CSR 방식이다. CSR이란 Client Side Rendering 클라이언트측이 직접 렌더링을 한다.