React - Router

1. 🧐라우팅이란

라우팅이란 html이 딱 하나를 가지고있는 SPA(Single Page Application)에서 주소창대로 다른 페이지를 보여줄 수 있는 방법으로 다른 페이지를 보여주는 걸 라우팅 이라고 부릅니다.

2. ✅라우팅 라이브러리 설치

react-router-dom

• yarn add react-router-dom

3. ✅라우팅 사용하기

1) 🎯index.js에 BrowserRouter 적용

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from './App';
import reportWebVitals from './reportWebVitals';

// 이부분이 index.html에 있는 div#root에 우리가 만든 컴포넌트를 실제로 
//랜더링하도록 연결해주는 부분입니다.
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);
reportWebVitals();

2) 🎯App.js에 Router 적용

// porps가 없을 때
<Route path="주소" component={[보여줄 컴포넌트]}/>
// props가 있을 때
<Route path="주소" render={(props) => (<BucketList list={this.state.list}/>)}/>

3) 🎯component router적용

import React from 'react';
import './App.css';
import { Route } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {

  constructor(props){
    super(props);
    this.state={};
  }
  
  render(){
    return (
      <div className="App">
        {/* component router 적용 */}
        <Route path="/" component={Home} />
        <Route path="/cat" component={Cat} />
        <Route path="/dog" component={Dog} />
      </div>
    );
  }
}

export default App;

4) 🎯exact 적용

/cat 과 /dog 에서 자꾸 Home 컴포넌트가 나옵니다 이유는 "/"기호가 "/cat"과 "/dog"에도 포함되어 있기 때문입니다.

// exact 적용하여 /로 접근시 /로만 들어가게 적용합니다.
 <Route path="/" exact component={Home} />

5) 🎯URL 파라미터 사용

파라미터 : /cat/nabi
쿼리 : /cat?name=nabi

• 파라미터 주기

//파라미터 주기
<Route path="/cat/:cat_name" component={Cat}/>

• 파라미터 사용 방법

import React from "react";

const Cat = (props) => {
  // 파라미터로 넘어온 값 확인
    console.log(props.match);
    return (
        <div>고양이 화면이에요.</div>
    )
}

export default Cat;

6) 🎯링크 이동 Link 사용

React에서 a태그와 비슷한 역할을 하는 Link를 이용하여 페이지 전환이 가능합니다.

<Link to="주소">텍스트</Link>

7) 🎯history 사용하기

Link 컴포넌트를 클릭하지 않고 페이지를 전환하는 두가지 방법이 있습니다.
1. props로 hisotry 객체 받아 이동
2. useHistory 훅을 사용하여 이동

• porps로 history 객체받아 이동

import React from "react";

const Dog = (props) => {
  // props의 history 객체를 살펴봅시다.
  console.log(props);
  // 그리고 history.push('/home')으로 페이지 이동도 해봐요!
  return (
    <div onClick={() => {props.history.push("/home");}}>
      강아지 화면이에요.
    </div>
  );
};
export default Dog;

• useHistory 훅을 사용해 이동

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

const Home = (props) => {
  let history = useHistory();
  return (
    <>
      <div>메인 화면이에요.</div>

      <button onClick={() => {history.push("/cat");}}>
        cat으로 가기
      </button>
    </>
  );
};

export default Home;

4. ✅Notfound page처리

exact가 중복처리를 하는방법이라면 정해지지 않은 주소로 접근할 경우 없는 페이지라고 사용자에게 알려주는게 UX적으로 좋은 사이트겠죠

1) 🎯NotFound 컴포넌트 생성

import React from "react";

const NotFound = (props) => {
  return <h1>주소가 올바르지 않아요!</h1>;
};

export default NotFound;

2) 🎯App.js Switch추가 후 적용

import { Route, Switch } from "react-router-dom";
import NotFound from "./NotFound";
...

    return (
      <div className="App">
        ...
          <Switch>
            <Route
              path="/"
              exact
              render={(props) => (<BucketList/>)}
            />
            <Route path="/detail" component={Detail} />
            <Route component={NotFound} /> // notfound 적용
          </Switch>
        ...
      </div>
    );

Switch 에서 해당하는 path가 없을경우 default인 Route로 빠져 NotFound 컴포넌트가 보이게 됩니다.

마무리

사이트에서 중요한 Router 개념과 React에서는 어떻게 Router를 사용하는지를 알아봤습니다. router에 props를 활용하여 데이터도 넘길수 있으니 유용하게 사용할 수 있을 것 같습니다.