[리액트를 다루는 기술] 13장 리액트 라우터로 SPA 개발하기

라우팅

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

• 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것

SPA

하나의 페이지로 이루어진 애플리케이션

• 기존에는 각 페이지마다 다른 HTML로 제공하였다면, SPA는 HTML 최초 받은 후 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트를 한다.
• 사용자 인터랙션이 많고 다양한 정보를 제공하는 애플리케이션에서 적합하다.

리액트에서 사용하는 라우트 시스템

1. 리액트 라우터
2. Next.js

React Router

라이브러리 설치

yarn add react-router-dom

src/index.js

• BrowserRouter 컴포넌트로 감싼다.

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

페이지 컴포넌트 만들기

Link 컴포넌트로 링크 보여주기

• a태그가 아닌 Link 컴포넌트를 사용해야 페이지를 새로 불러오지 않고 브라우저 주소의 경로만 바꾼다.
• <Link to="경로">링크 이름</Link>

src/routes/Home.js

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

const Home = () => {
    return (
        <div>
            <h1>홈</h1>
            <p>가장 먼저 보여지는 페이지 입니다</p>
            <Link to="/about">소개</Link>
        </div>
    )
}

export default Home

src/routes/About.js

const About = () => {
    return (
        <div>
            <h1>소개</h1>
            <p>리액트 라우터 사용 프로젝트입니다</p>
        </div>
    )
}

export default About

src/App.js

• <Route path="주소규칙" element={보여줄 컴포넌트 JSX} />

const App = () => {
  return(
    <Routes>
      <Route path="/" element={<Home/>}/>
      <Route path="/about" element={<About/>}/>
    </Routes>
  )
}
export default App;

URL 파라미터

• ex) /profile/velopert
• 주로 id 또는 이름을 사용하여 특정 페이지를 조회할 때 사용
• useParams라는 Hook을 이용하여 조회할 수 있다.

쿼리스트링

• ex) /articles?page=1&keyword=react
• 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용
• useLocation라는 Hook을 이용하여 조회할 수 있다.
  • pathname: 현재 주소의 경로
  • search: ?를 포함한 쿼리스트링 값
  • hash: # 뒤의 값
  • state: 페이지로 이동할 때 임의로 넣을 수 있는 상태 값
  • key: location 객체의 고유값
• useSearchParams라는 Hooks을 통해서 쿼리스트링을 쉽게할 수 있다.

Home.js

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

const Home = () => {
    return (
        <div>
            <h1>HOME</h1>
            <ul>
                <li><Link to="/about/zerome">zerome 소개</Link></li>
                <li><Link to="/about/zerome2">zerome2 소개</Link></li>
                <li><Link to="/about/zerome3">zerome3 소개</Link></li>
                <li><Link to="/todo">Todo</Link></li>
            </ul>
        </div>
    )
}

export default Home

About.js

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

const data = {
    zerome: {
        name: '제로미',
        description: '프론트개발자'
    },
    zerome2: {
        name: '제로미투',
        description: '백엔드개발자'
    },
}

const About = () => {
    const params = useParams()
    const profile = data[params.username]

    return (
        <div>
            <h1>소개</h1>
            {profile ? (
                <div>
                    <h2>{profile.name}</h2>
                    <p>{profile.description}</p>
                    <p>쿼리스트링: {location.search}</p>
                </div>
            ) : (
                <p>존재하지 않는 프로필입니다.</p>
            )}
        </div>
    )
}

export default About

App.js

import { Route, Routes } from 'react-router-dom';
import Home from './routes/Home';
import About from './routes/About';
import Todo from './routes/Todo';

const App = () => {
  return(
    <Routes>
      <Route path="/" element={<Home/>}/>
      <Route path="/about/:username" element={<About/>}/>
      <Route path="/todo" element={<Todo/>}/>
    </Routes>
  )
}

export default App;