React Router

React는 기본적으로 Single Page Application이므로 하나의 페이지에서 여러개의 컴포넌트를 보여주는 방식을 채택한다. (보여주는 페이지는 index.html 하나)

즉, url의 하위 주소를 호출하면 해당 page를 불러오는 것이 하닌 해당 url에 해당하는 component를 보여주도록 한다.

---

React Router Dom

보여주고자 하는 페이지 컴포넌트를 일일이 구현하는 것이 아니라 React Router Dom 라이브러리를 사용하여 페이지 컴포넌트를 구현한다.

1. Terminal에서 npm install react-router-dom@6 을 입력한다. (React Router Dom v6 설치)
2. index.js에 <App /> component 호출부를 <BrouserRouter> component로 감싼다. (자동으로 import { BrowserRouter } from 'react-router-dom'; 선언됨
3. App.js에서 react-router-dom의 component를 사용한다.

---

페이지 컴포넌트 구현

페이지 컴포넌트는 Routes component와 Route component로 구현한다. Routes는 페이지들의 집합 컴포넌트이며, Route는 하나의 페이지 컴포넌트에 해당한다.

Route 내 요소로 path는 페이지의 주소를 뜻하고, element는 해당 주소에 표시할 내용이다.

<Routes>
  <Route path='/' element={
    <>
      <div>메인페이지</div>
      <div className='main-bg' style={{ backgroundImage: 'url(' + imgSource + ')' }}></div>
      <Container>
        <Row>
          {
            goods.map(function (obj, idx) {
              let imgUrl = "xxxxxxxxxxxxxxxxxxxxxxxxxxxx";
              return (
                <GoodsCol imgUrl={imgUrl}
                  goodsTitle={obj.title}
                  goodsContent={obj.content} />
              )
            })
          }
        </Row>
      </Container>
    </>
  } />
  <Route path='/detail' element={
    <>
    <div>상세페이지</div>
    <DetailPage/>
    </>
  }
  />
  <Route path='/about' element={<div>어바웃페이지</div>}/>
</Routes>