1. 세팅과 기본 라우팅 - Route

• 여러가지 페이지를 만들고 싶을 때 router를 사용한다.

• [1. 라우터 라이브러리 설치하기]

  npm install react-router-dom@5
  

  yarn add react-router-dom@5
  

• [2. index.js 파일에 browserRouter를 설치한다.]

  • App.js에 있는 <App> 컴포넌트를 index.html에 적어준다.

  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <App/>
      </BrowserRouter>
    </React.StrictMode>document.getElementById('root')
  );
  
  

• [3. 페이지를 라우팅한다]

  • 3-1. 여러가지 태그를 import한다.
  • 3-2. 원하는 곳에 <Route><Route/>태그를 작성한다.
  • 3-3. <Route>안에 path, path 방문시 보여줄 HTML 을 적는다.

  import { Link, Route, Switch } from 'react-router-dom';
  
  function App(){
    return (
      <div>
        <Route path="/">
          <div>메인페이지인데요</div>
        </Route>
        <Route path="/detail">
          <div>상세페이지인데요</div>
        </Route>
      </div>
    )
  }
  

  • (꿀팁!) 좀 더 깔끔하게 사용하기

    <Route path="/component" component={Card} ></Route>
    <Route path="/component"> <Card/> </Route>
    

• [특징]

  • React-Router 특징
    • 각각 페이지마다 다른 HTML 파일을 보여주는게 아니라 HTML 내부의 내용을 갈아치워서 다른 페이지처럼 보이게 하는 것이다.
  • /detail로 하면 여러개가 뜨는 이유
    • /detail이라고 적으면 /라는 경로도 포함하여 두가지 모두 보여준다. 따라서 exact 를 붙여주면 정확히 일치하는 경우에만 라우팅을 해준다.
  • <BrowserRouter>, <HashRouter> 차이
    • HashRouter는 사이트 방문시 URL 맨 뒤에 /#/이 붙은채로 시작한다.
      • 원래는 브라우저 주소창에 뭔가 페이지를 입력하면 서버에게 특정 페이지를 보여달라고 요청한다. 리액트의 경우에는 리액트가 라우팅을 담당하고 있기 때문에 서버에 요청하면 안된다. (존재하지 않는 서버를 요청하기에 404 Page Not Found 에러가 뜰 수 있다). 브라우저 주소창은 #뒤에 붙은 것을 서버에게 요청하지 않는다.
    • BrowserRouter는 사이트 방문시 # 없이 깔끔해진다.
      • BrowserRouter를 쓰려면 리액트가 전부 라우팅 하도록 서버에서 API 세팅을 잘해주어야 한다.

2. React Router 2 : Link, Switch, history

• 세팅

  • [Detail.js] 파일
    1. src 폴더 내에 상세페이지 내용을 담을<Detail> 컴포넌트를 만든다.
    2. 맨 위에 항상 import React를 해주어야 한다.
    3. 맨 마지막에 Detail 함수를 export 해준다.

• 페이지 이동하기 기능 (1) - Link

  • [App.js] 파일

    <방법 1>

    1. 상단메뉴(Navbar)에서 이동 버튼이 될 글자들을 <Link> 태그로 감싼다.

    2. to 속성을 이용해서 경로를 적어준다.

       function App(){
         return (
           <div>
             <Navbar>
                <Nav.Link> <Link to="/">Home</Link> </Nav.Link>
                <Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>
             </Navbar>
             <나머지HTML/>
           </div>
         )
       }
       

       • Detail 글자를 누르면 /detail 경로로 이동한다.
       • Home이는 글자를 누르면 /경로로 이동한다.

    <방법 2>

    1. html 태그를 링크 태그로 만들어 버린다.

       function App(){
         return (
           <div>
             <Navbar>
                <Nav.Link as={Link} to="/">Home</Link> </Nav.Link>
                <Nav.Link as={Link} to="/detail">Detail</Link> </Nav.Link>
             </Navbar>
             <나머지HTML/>
           </div>
         )
       }
       

       • warning("a태그 안에 a태그 넣으면 안된다" )을 제거할 수 있다.
       • as라는 것은 react-bootstrap 문법인데, 기본 <a> 대신 사용할 HTML태그 혹은 컴포넌트를 집어넣을 수 있다.

• 페이지 이동하기 기능 (2) - useHistory()

  • [Detail.js ]

    1. useHistory() 함수를 import한다.

       1. useHistory()는 useState처럼 편리한 일종의 Hook이다.

    2. let history 변수에 해당 함수를 저장한다.

    3. 이제 history 변수에는 object{} 자료가 저장되며 이 안에는 페이지 이동 내역, 유용한 함수가 저장된다.

    4. onClick={()=>{ history.goBack() } 을 하면 뒤로가기가 실행된다.

       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 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">중요
               </div>
             </div>
         </div>
         )
       };
       
       export default Detail
       

    5. onClick={()=>{ history.push('/') } 을 하면 커스텀한 페이지로 이동한다.

       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 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 onClick={()=>{ history.push('/') }} className="btn btn-danger">푸시하기
               </div>
             </div>
         </div>
         )
       };
       
       export default Detail
       

• 라우터 하나만 보여주는 기능 - <exact>

  • 정확하게 매칭되는 경우에만 해당 라우터를 보여주는 기능이다.

    function App(){
      return (
        <div>
            <Route exact path="/">
    	         /로 이동
            </Route>
            <Route exact path="/detail">
              <Detail/>
            </Route>
        </div>
      )
    }
    

    • <Switch>로 감싸면 여러개의 Route가 매칭이 되어도 맨 위의 Route 하나만 보여준다.

• 라우터 하나만 보여주는 기능 - <Switch>

  • 매치되는 <Route> 들을 전부 보여주지 않고 한번에 하나만 보여주도록 하는 기능이다.

    function App(){
      return (
        <div>
          <Switch>
            <Route exact path="/">
    	         /로 이동
            </Route>
            <Route path="/detail">
              <Detail/>
            </Route>
            <Route path="/:id">
              <div>새로 만든 route입니다</div>
            </Route>
          </Switch>
        </div>
      )
    }
    

    • <Switch>로 감싸면 여러개의 Route가 매칭이 되어도 맨 위의 Route 하나만 보여준다.

'