[React] 9. 라우팅-1 (react-router-dom세팅, Routes, Route, Link)

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

5. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 5. 반복되는 부분 축약하기 (map)

6. 2023.05.29 - [🌌 | WEB DEV/React] - [React] 6. props

7. 2023.07.03 - [🌌 | WEB DEV/React] - [React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기)

8. 2023.07.06 - [🌌 | WEB DEV/React] - [React] 8. 다른 파일에서 데이터 가져오기

 

 

웹사이트를 제작할 때 페이지를 나누고 싶은 경우 

html 파일을 새로 하나 생성한다면 그것이 바로 새로운 페이지가 되는 것이다.

 

하지만 React는 단 하나의 html 파일인 index.html 만을 사용한다.

따라서 react-router-dom 이라는 라이브러리를 이용하여 div 안의 내용을 바꾸어주며 페이지 전환을 구현한다!

 

리액트	리액트X
컴포넌트 제작 해당 path에 접속 요청 시 그에 맞는 컴포넌트를 보여줌	여러 html 파일 생성 해당 path에 접속 요청 시 그에 맞는 html 파일 송신

 

 

1. react-router-dom 세팅하기

먼저 react-router-dom을 설치한다.

npm install react-router-dom@6

 

이후 index.js에서 라이브러리를 import한 뒤

<App/> 태그를 <BrowserRouter>태그로 감싸준다.

//index.js

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

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

 

 

2. 라우팅

url마다 다른 페이지를 보여주고 싶은 경우 아래와 같이 구현한다.

 

// App.js

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

function App(){
  return(
    ...
    
    <Routes>
      <Route path="/경로1" element={ <div> ... </div> } />
      <Route path="/경로2" element={ <div> ... </div> } />
    </Routes>
    
  )
}

 

- Routes : 페이지 컨테이너

- Route : 각 페이지들

 

위에서 설정한 경로에 접속할 경우 html의 해당 위치에 요소가 보이게 된다.

 

Routes 외의 태그들은 페이지와 상관없이 항상 화면에 보인다!

 

 

예시

//App.js
<Navbar variant="dark" className='nav-container'>
  <Container className='navbar'>
    <Navbar.Brand href="#home">RED WAVE</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#cart">Cart</Nav.Link>
    </Nav>
  </Container>
</Navbar>

<Routes>
  <Route path='/' element={
    <>
      <div className="main-bg"></div>
      <div className="item-container">
        {
          data.map(function(a,i) {
            return(<Item data={data} i={i} />)
          })
        }
      </div>
    </>
  }></Route>
  <Route path='/detail'></Route>
</Routes>

 

1) 메인 페이지

 

2) /detail

 

위처럼 Routes 안에 들어있지 않은 navbar는 페이지에 상관없이 존재하지만

내부에 존재하는 요소들은 path에 따라 전환이 되는 것을 알 수 있다.

 

 

3. 페이지 전환

페이지 전환은 <Link/> 태그로 구현한다.

to=경로 를 통해 설정한 path로 접속하도록 한다.

 

<Link to="/경로1"> ... </Link>
<Link to="/경로2"> ... </Link>

 

 

예시

//App.js
<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

 

 

Link태그는 실제로 a태그로 적용이 된다.