바닐라 자바스크립트에서 페이지를 여러 개 만들고 싶으면 페이지마다 html을 만들어야 한다. 그리고 원하는 경로를 라우팅을 해서 html 파일을 전송하는 식이다.

하지만 리액트는 싱글 페이지 어플리케이션(SPA: Single Page Application) 이다. index.html 파일 딱 하나로 모든 게 구성된다. 그럼 세부 페이지는 어떻게 만들까? 페이지를 컴포넌트로 만들어서 라우팅 주소마다 if문 같은 조건문을 달아주면 된다.

이건 말이 쉽지.. 하나하나 코딩하려면 복잡하지 않겠는가.

그래서 react-router-dom 라이브러리를 대다수가 이용한다.

설치 및 세팅

1. 터미널에서 npm i react-router-dom@버전 입력

2. index.js 파일에 BrowserRouter import하고 App 감싸기

// index.js

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

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

react-router-dom 사용법

1. 페이지마다 다른 요소를 렌더하려면?
   • app.js에서 Routes, Route를 import
   • 원하는 위치에 Routes로 Route를 감싼다.
   • Route의 path는 라우팅할 주소, element는 그 주소에서 보여줄 요소를 중괄호{ }로 감싼다.

// app.js

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

function App() {
  return (
    // 다른 코드 생략
      <Routes>
        <Route path="/" element={<Main product={product}/>} />
        <Route path="/detail" element={<Detail />} />
      </Routes>
	// 다른 코드 생략

사실 Detail 컴포넌트는 새 파일로 만든 걸 import로 가져왔다.

2. 이처럼 코드가 긴 페이지는?
   • 새 파일에 컴포넌트 작성하여 export default 하고
   • app.js에 import 해주기

//detail.js

import { Container, Row, Col } from 'react-bootstrap';

function Detail () {
    return (
      <Container>
        <Row className="card-row">
            <Col>
                <img src="/outer/jacket1.jpg"
      				 alt="jacket1 img"
      				 width="100%" />
            </Col>
            <Col >
                <h4 className="pt-5">상품명</h4>
                <p>상품설명</p>
                <p>120000원</p>
                <button className="btn btn-danger">주문하기</button> 
            </Col>
        </Row>
  </Container> 
    )
  }

  export default Detail;

// app.js

import Detail from './detail';

---

덧붙이는 말

• 페이지 대신 컴포넌트로 표현한다는 말을 이해할 것 같다. 페이지마다 html 파일을 생성하는 게 아니라, 컴포넌트 단위로 js 파일을 생성해 import 해주는 방식인 듯하다.

• 페이지 통째로 파일로 만든다는 아이디어는 같다. 하지만 각각의 html 파일을 매번 통으로 렌더링하는 방식과 특정 부분만 처리하는 방식 사이엔 퍼포먼스 차이가 있지 않을까 예상해 본다. 있다면 얼마나 유의미할까?