React - 쇼핑몰만들기 (5)

구현하는 기능과 배우는 컨셉

✔ Router - Link , Switch , histroy
✔ Link 태그로 페이지 이동버튼 만들기
✔ histroy로 지정된 곳 이동하기
✔ Switch 역할과 필요성

👉 Link 태그로 페이지 이동버튼 만들기

import {Link, Route, Switch} from 'react-router-dom';
function App(){
  return (
    <div>
      <Navbar>
         <Nav.Link> <Link to="/">Home</Link> </Nav.Link>
         <Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>
      </Navbar>
    </div>
  )
}

◾ Navbar 컴포넌트 안에 Nav.Link 라는 컴포넌트에 여러가지 버튼들이 있다.
◾ 페이지 이동버튼으로 바꾸길 원하는 글자들에<Link> 태그를 감싼다.
◾ 다음에 to 라는 속성을 이용해서 경로를 적으면 페이지 이동버튼이 완성된다
◾ 그럼 Detail이라는 글자를 누르면 /detail 경로로 이동하고, Home이라는 글자를 누르면 / 경로로 이동한다.

👉 useHistroy()함수 이용해서 뒤로가기버튼 만들기

(Detail.js 파일)

import React from 'react';
import { useHistory } from 'react-router-dom';

function Detail(){
  
  let history = useHistory();
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
        <img>
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">주문하기</button> 
          <button onClick={()=>{ history.goBack() }} className="btn btn-danger">뒤로가기</button>
            <button onClick={()=>{ history.push('/') }} className="btn btn-danger">뒤로가기</button>
        </div>
      </div>
  </div>  
  )
};

export default Detail 

◾ import { useHistory } from 'react-router-dom'
◾ let history 라는 변수에 그 함수를 저장
◾ 그럼 이제 history 라는 변수엔 큰 object {} 자료가 하나 저장됨
◾ 그 object 안에는 페이지 이동 내역 + 유용한 함수가 저장되어있음 (goBack() 메서드 사용시 뒤로감)
◾ push() 라는 함수를 쓰고 안에 경로를 입력하시면 그 경로로 이동한다.

👉 Switch 컴포넌트에 대해 알아보자

(App.js 파일)

function App(){
 return (
   <div>
     <나머지HTML/>
     <Switch>
     <Route exact path="/">
       어쩌구
     </Route>
     <Route path="/detail">
       <Detail/>
     </Route>
    </Switch>
   </div>
 )
}

◾ 매치되는 <Route> 들을 전부 보여주지 말고 한번에 하나만 보여주는 기능을 만들고 싶을 때 사용