페이지 라우팅

브라우저를 거쳐 웹 서버에 원하는 http를 요청하고 이에 맞는 html 파일을 받아와 렌더링하는 과정

• 원리
  전통적인 방식 : MPA (요청한 페이지의 html을 다 받아오는 방식)
  -> 페이지를 변경할 때마다 기존의 렌더링했던 페이지를 모두 제거하고 다시 받아옴(효율성 X)

리액트의 방식 : SPA (하나의 페이지를 통해 모든 라우팅을 처리)
-> HTML (빈 껍데기) + JS Files (.jsx등의 모듈, etc…) = Bundling (파일묶음) => React App
-> Bundling된 컴포넌트 단위의 모든 파일이 제공되어 요청이 필요없이 페이지 스스로 변경

하나의 HTML파일만 존재하고 JS로 여러 요소를 그려내는 것 : CSR (Client Side Rendering)

// Router 불러오기
import {BrowserRouter} from 'react-router-dom';

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

Router가 감싸고 있는 앱의 특정 경로들을 할당하고 배치

// ex)
import './App.css'
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Search from './pages/Search';
import Country from './pages/Country';
import NotFound from './pages/NotFound';

function App() {
  return ( 
    <Routes>
      <Route path='search' element={<Search />} />
      <Route path='' element={<Home />} />
      <Route path='country' element={<Country />} />
      <Route path='*' element={<NotFound />} />  
    </Routes>
  )
}

export default App;

-> 각각의 경로를 통해 element로 지정된 jsx 파일을 찾아 최상위 컴포넌트에 렌더링

• Navigating
  특정 페이지로 이동하는 경로를 Link 태그를 통해 설정

import { Routes, Route, Link, useNavigate } from 'react-router-dom';

const nav = useNavigate();

  const onClick = () => {
	// 인수로 경로 지정
	nav('/search');
  }

return (
    <>
      <Routes>
        <Route path='search' element={<Search />} />
        <Route path='' element={<Home />} />
        <Route path='country' element={<Country />} />
        <Route path='*' element={<NotFound />} />  
      </Routes>
      <div>
		<!-- to 속성에 인수로 경로를 지정하여 HTML의 a태그와 동일한 효과 구현 -->
        <Link to={'/'}>Home</Link>
        <Link to={'/search'}>Search</Link>
        <Link to={'/country'}>Country</Link>

		<!-- 함수로도 구현 가능 -->
        <button onClick={onClick}>서치 페이지로 이동</button>
      </div>
    </>
  )

• 동적 경로 대응
  Query String : URL 뒤에 ?{이름}={값} 형태로 동적인 값 전달 (동적으로 변경되는 경로)
  URL Parameter : URL 뒤에 /{값} 형태로 동적 데이터 전달

Query String + URL Parameter = Dynamic Routing (동적 라우팅)

// QueryString
import { useSearchParams } from "react-router-dom"

export default function Search() {
  // queryString
  const [searchParams, setSearchParams] = useSearchParams();

  return <div>Search {searchParams.get('q')}</div>
}

-> useState와 유사하게 작성하여 동적인 값을 받아올 변수를 지정, .get(‘any’)로 이를 렌더링

// URL Parameter
<Route path='country/:code' element={<Country />} />

import { useParams } from "react-router-dom"

export default function Country() {
  const params = useParams();
  return <div>Country {params.code}</div>
}

useParams hook을 변수에 할당해 params의 코드를 렌더링
-> /:code를 명시한 요소는 /country/???의 형태로 작성하지 않을시 오류 발생