리액트> 페이지 나누기(라우터)

페이지를 나누고 싶으면 

일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 

근데 리액트는 html 파일을 하나만 사용합니다.

그래서 리액트에선 누가 다른 페이지 요청하면 그냥 내부에 있는 <div>를 갈아치워서 보여주면 됩니다. 

근데 직접 코드짜면 귀찮으니 react-router-dom 이라는 외부 라이브러리 설치해서 구현하는게 일반적이라 그렇게 해봅시다. 

 

 

 

 

 

react-router-dom 설치하려면 

 

외부라이브러리라서 설치 셋팅하는 법은

react-router-dom 홈페이지 들어가서 그대로 따라하면 되는데 그냥 알려드리자면 

 

터미널 열어서 

npm install react-router-dom@6 입력해서 설치합니다.

 

 

셋팅은 index.js 파일로 가서 

 

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

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

▲ import 어쩌구 해오고

<BrowserRouter> 이걸로 <App/> 이걸 감싸면 끝입니다. 

 

 

 

 

 

라우터로 페이지 나누는 법 

 

다른 웹사이트를 잘 살펴보면 

codingapple.com/어쩌구로 접속하면 A페이지를 보여주고 

codingapple.com/저쩌구로 접속하면 B페이지를 보여줍니다. 

이런 식으로 url 경로마다 다른 페이지를 보여주고 싶으면 이렇게 작성합니다.

 

 

 (App.js)

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

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

1. 우선 상단에서 여러가지 컴포넌트를 import 해오고 

2. <Routes> 만들고 그 안에 <Route>를 작성합니다.

3. <Route path="/url경로" element={ <보여줄html> } /> 이렇게 작성하면 됩니다. 

 

그래서 방금 페이지 2개 만든 것임 

진짜 페이지 보이나 url 뒤에 /about 입력해보고 /detail 도 입력해보십시오.

 

 

 

 

<Route path="/" element={ <div>메인페이지에서 보여줄거</div> } /> 

▲ 이 url 경로는 메인페이지입니다.

Q. 저는 메인페이지 접속시에만 상품목록 보여주고 싶습니다 

A. 그럼 element={ } 안에 상품목록 레이아웃 다 넣으면 되는거 아닙니까 

 

 

 

 

<Route path="/" element={ 
  <>
   <div className="main-bg"></div>
   <div className="container">
     <div className="row">
       { shoes.map((a, i)=>{
         return <Card shoes={shoes[i]} i={i} ></Card>
        })}
      </div>
    </div> 
  </>
} /> 

이러면 메인페이지 접속시에만 상품목록이 보이고

나머지 /detail 그리고 /about 페이지에선 안보이겠군요. 

이렇게 페이지에서 보여줄 html 내용은 마음대로 작성하면 됩니다. 

 

 

 

 

 

페이지 이동 버튼은

 

유저들은 주소창에 url 입력해서 들어가지 않고 링크타고 들어갑니다. 

링크를 만들고 싶으면 react-router-dom에서 Link 컴포넌트 import 해오고 

원하는 곳에서 <Link> 쓰면 됩니다. 

 

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

이러면 각각 url 경로로 이동하는 링크를 생성할 수 있습니다.

진짜 이동하는지 눌러봅시다.