[React] React Router 2 : Link, Switch, history 기능 알아보기

💡 실습 포인트!

💜 상세페이지를 담을 Detail Component 만들기

import React from "react";

function Detail() {
  return (
    <div className="container">
          <div className="row">
            <div className="col-md-7">
              <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
            </div>
            <div className="col-md-5 mt-4">
              <h4 className="pt-5">White and Black</h4>
              <p>Born in France</p>
              <p>120000</p>
              <button className="btn btn-danger mx-1">주문하기</button> 
              <button className="btn btn-danger mx-1">뒤로가기</button> 
            </div>
          </div>
    </div>  
  )
}

export default Detail;

• 지난 시간에는 <Route></Route> 태그 안에 html 내용 전체를 넣어주었다.
• 그러나 이번에는 Main Component 처럼 따로 Detail.js 파일을 만든 후 Detail 이라는 이름의 Component 를 생성해서 export 해주었다.

// 전체 코드 미리보기
// 전체 코드가 길어서 불필요한 부분은 제외했다.

import Main from './Main'
import Detail from './Detail';

function App() {

  let [shoes, setShoes] = useState(Data);
  
  return (
    <div className="App">

          {/* Main */}
          <Route exact path='/'>
            <Main shoes={shoes}/>
          </Route>
          
          {/* Detail */}
          <Route path='/detail'>
            <Detail />
          </Route>
    
    </div>
  );
}

• App.js 에 Detail 파일의 Detail 이라는 변수를 import 해오면 이제 App.js 에서 Detail Component 를 사용할 수 있게 된다.

---

💜 페이지 이동 기능 만들기

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

// 기존 Navbar
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>

// Link 태그로 페이지 이동 기능 추가
<Nav.Link><Link to='/'>Home</Link></Nav.Link>
<Nav.Link><Link to='/detail'>Detail</Link></Nav.Link>

• 이번에는 Link 태그를 이용해서 상단 Navbar 에서 원하는 페이지로 이동할 수 있는 기능을 추가해보았다.
• 나는 Home 이라는 버튼을 누르면 / 경로로, Detail 이라는 버튼을 누르면 /detail 경로로 이동시켜줄 것이 때문에 각 글자를 <Link></Link> 태그로 감싸준 후 to 라는 속성을 이용해서 경로를 적어주었다.
  (참고로 Link 태그는 'react-router-dom' 을 설치한 후에 import 해오면 된다.)

---

🤍 페이지 이동 기능 만들기 (뒤로가기)

• <Link></Link> 태그 외에도 페이지 이동 함수를 사용하여 페이지 이동 기능을 만들 수 있다.

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

function Detail(props) {

    let history = useHistory();

    return (
        <div className="container">
              <div className="row">
                <div className="col-md-7">
                  <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
                </div>
                <div className="col-md-5 mt-4">
                  <h4 className="pt-5">White and Black</h4>
                  <p>Born in France</p>
                  <p>120000</p>
                  <button className="btn btn-danger mx-1">주문하기</button> 
                  <button className="btn btn-danger mx-1" onClick={()=>{history.goBack()}}>뒤로가기</button> 
                </div>
              </div>
        </div>  
    )
}

export default Detail;

• 이번에는 Detail.js 파일에 '주문하기' 버튼과 동일한 스타일의 '뒤로가기' 버튼을 추가해보았다.
• 뒤로가기 기능을 사용하기 위해 useHistory() 함수를 import 해온 다음 history 라는 변수에 할당해주었다.
  (참고로 useHistory() 함수는 일종의 Hook 이다. 편하게 useState 와 비슷하다고 생각하면 된다.)
• 이제 history 라는 이름의 변수에는 페이지 이동 내역과 유용한 함수가 저장되어 있는 큰 object 자료가 할당된 것이다.
• history 에 저장된 여러 자료들 중 가장 유용하고 뒤로가기 기능에 필요한 함수는 goBack() 이라는 함수이다.
• goBack() 함수를 실행하게 되면 페이지가 뒤로 간다.
• 따라서 '뒤로가기' 버튼에 onClick 속성으로 {()=>{history.goBack()}} 이라는 코드를 작성해주었다.
  (이외에 궁금한 부분이 있으면 라이브러리 사용법을 검색해보면 된다.)

---

🤍 페이지 이동 기능 만들기 (커스텀 페이지로 이동하기)

• 원하는 페이지로 페이지 이동하는 기능을 만들고 싶으면 라이브러리 사용법을 참고하여 push() 함수를 사용하면 된다.
• 버튼으로 사용할 태그 안에 onClick 속성으로 {()=> {history.push('/경로명')}} 과 같은 형식으로 경로명에 원하는 경로를 넣어 사용하면 해당 경로로 이동하게 된다.

---

💜 Switch Component 알아보기

• <Switch></Switch> 태그는 주소창에 경로를 입력했을 때, 그 태그 안에 있는 <Route></Route> 태그들 중 매치되는 <Route></Route> 들을 모두 보여주는 게 아니라 한번에 딱 하나만 보여주는 기능이다.
• 무슨 말이냐면 <Route> 의 path 에 적혀있는 경로가 포함관계라면 기본적으로 React Router 는  포함하는 모든 <Route></Route> 태그의 내용을 보여주게 된다.

          <Route path='/'>
            <div>메인 페이지</div>
          </Route>

          <Route path='/detail'>
            <div>상세 페이지</div>
          </Route>

• 예를 들어 위와 같은 코드를 작성했다고 한다면 아래와 같이 /detail 경로로 접속했을 때 '메인 페이지', '상세 페이지' 문구가 모두 보인다.

 

• 따라서 이런 상황을 방지하고 싶다, 한 번에 하나의 <Route></Route> 태그 내용만 보여주고 싶다 그럴 때 그 범주에 넣을 <Route></Route> 태그들을 <Switch></Switch> 태그 안에 넣어주면 된다.

 

• 다만, <Switch></Switch> 태그로 감싸면 매칭된 <Route></Route> 태그 중 맨 위의 하나만 보여주므로 코드의 수정이 필요하다.

 

• <Route></Route>태그들의 순서를 조정해주면 exact 를 사용하지 않고도 위와 같이 원하는 페이지 하나만 나오도록 할 수 있다.