리액트 공부4. 리액트 라우터

기존에는 페이지 나누려면 html 파일을 여러개 만들어서 하나하나의 페이지로 사용했는데

리액트에서는 html 파일 하나만으로 그것이 가능하다. 누가 다른 페이지를 요청하면 내부에 있는 <div>만 갈아치워서 보여주면 되기 때문, 이런 행위를 쉽게 해주는 것이 리액트 라우터 라이브러리다.

 

외부 라이브러리는 구글에 라이브러리 이름 검색해서 홈페이지가서 그대로 따라하면 되는데 라우터같은경우는

터미널에 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>
);

새로 BrowserRouter를 임포트해주고기존 <App /> 만 있던 곳에 위아래로 </BrowserRouter>를 넣어주어야 한다.

 

App.js에서는 마찬가지로 임포트를 해주고 <Routes>태그 안에 <Route>태그안에 보여줄 html을 넣어주면 된다.

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

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/" element={ <div>보여줄 html</div> } /> //메인페이지
      <Route path="/detail" element={ <div>보여줄 html</div> } /> //디테일 페이지
    </Routes>
  )
}

페이지 이동 버튼은 직접 url 주소를 입력해서 링크를 타고 들어가도 되고 혹은

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

처럼 각각 해당하는 주소로 이동하는 버튼을 달아주어도 된다.

 

페이지 이동기능

useNavigate, outlet등을 추가로 임포트 해준다.

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

이제 페이지 이동은 Link태그 대신 다음과 같이 쓸 수 있다.

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

만약 navigate(-1)등으로 숫자를 넣으면 그 숫자만큼 페이지를 이동할 수 있다.

 

404페이지

유저가 이상한 경로로 접속했을 때 오류페이지를 보여주고싶다면

<Route path="*" element={ <div>없는페이지임</div> } />

서브경로를 만들 수 있는 nested routes

/about/member로 접속하면 회사의 멤버를 소개하는 페이지, about/location으로 접속하면 회사 위치 소개하는 페이지를 만든다고 생각을 하면

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

이렇게 만들어도 되지만

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

이렇게 만들어도 된다. <Route>안에 <Route>를 넣을 수 있는데 이걸 Nested routes라고 부른다.

또한 다음과 같은 코드가 작동하기 위해선 Route안에 Route를 보여주기 위한 Outlet을 성정해줘야 한다.

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

<Outlet>은 nested routes안의 element들을 어디에 보여줄지 표기하는 곳이다.

 

useParam()

페이지마다 각각 다른 내용을 보여주려면 /detail/0 detail/1 detail/2 등을 보여주면 된다. 즉 현재 url파라미터에 입력된 숫자를 넣으면 된다.

<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

우선 경로에 :id라는 것을 추가하고 

import { useParams } from 'react-router-dom'

let {id} = useParams();

이렇게 id 값을 받아오면 이 id는 유저가 경로창에 입력한 id가 된다.

 

평소엔 detail/0 이런식으로 0번째 상품을 보여주어 문제가 없었지만, 만약 상품의 리스트의 순서를 바꾸거나 하는 일이 생기면 순서가 뒤죽박죽이 된다.

보통 데이터를 가져오면 데이터 안에 {id:0}이런식으로 저장이 되어있는데 url에 입력한 번호와 같은 id번호를 찾아서 데이터바인딩 하면된다.

 

(data.js)
[
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },
  {둘째상품},
  {셋째상품}
]

자바스크립트엔 .find()라는 문법이 있는데 array 자료 안에서 원하는 항목만 찾아올 수 있다

array자료.find(()=>{return 조건식})

function Detail(props){

  let { id } = useParams();
  let 찾은상품 = props.shoes.find(function(x){
    return x.id == id
  });

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

찾은상품이라는 변수에 props에서 shoes를 가져오고 find를 이용해 id가 같은 것을 찾고 html안에선 그 상품의 데이터들을 가져오면 된다.