React : 리액트 라우터 (설치, 세팅, 이동버튼) 및 외부라이브러리 사용법

리액트에서 페이지 나누는 법

리액트를 쓰지 않으면 페이지를 나누고 싶을 때 html을 여러개 만들지만, 리액트는 html 파일을 하나만 사용해도 된다.

1. 컴포넌트를 만들어서 상세페이지 내용을 채운다
2. /페이지로 접속하면 해당 컴포넌트를 보여준다

react-router-dom이라는 라이브러리를 쓰면 위 작업을 쉽게 할 수 있다.

---

설치

터미널에 아래 코드를 입력한다. (뒤 6은 버전명이다.)

npm install react-router-dom@6

 

그리고 index.js에 import를 삽입하고, <App /> 태그를 감싸는 <BrowserRouter>코드를 입력한다.

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

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

* import에 ./부터 경로를 작성한 것들은 내가 만든 파일, 위 react-router-dom처럼 경로가 없는 것들은 대부분 라이브러리다.

---

사용법 (외부라이브러리 사용법)

App.js에 아래 코드를 import한다. ({}안에 사용할 컴포넌트들을 작성한다.)

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

---

return 내에 사용할 때는 아래처럼 사용한다.

function App() {
  let [shoes] = useState(data);
  
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<div>메인페이지 내용</div>} />
        <Route path="/cart" element={<div>상세페이지 내용1</div>} />
        <Route path="/detail" element={<div>상세페이지 내용2</div>} />
      </Routes>
    </div>
  );
}

• Route는 각각의 페이지들이다.
• path는 해당 페이지의 경로이다.
  (path에 /만 넣는다면 메인페이지가 된다.)
• element는 해당 페이지 안에 들어갈 컨텐츠이다.

---

사용예시

Router 안의 element는 하나의 div 태그로 묶어줘야 하므로, fragment 문법으로 묶어주었다.

<Routes>
    <Route path="/" element={
      <>
      <div className="main-bg" style={{backgroundImage : 'url('+ mainBg +')'}}></div>
      <div className="container">
        <div className="row">
          {
            shoes.map(function(a, i){
              return (
                <Product shoes={shoes} i={i}/>
              )
            })
          }
        </div>
      </div>
      </>
    } />
    <Route path="/cart" element={<div>상세페이지 내용1</div>} />
    <Route path="/detail" element={<div>상세페이지 내용2</div>} />
</Routes>

---

페이지 이동 버튼

<Link to="/">홈</Link>
<Link to="/cart">장바구니</Link>
<Link to="/detail">상세보기</Link>

---

출처 : 코딩애플 https://codingapple.com/