TIL81. 리액트 라우터 비교하기

리액트 페이징처리를 도와주는 라이브러리들을 비교하고 상황에 맞는 라우터를 적용해보자.

Redirect(with public route& private route)

사용자의 로그인 상태나 권한에 따라 접근할 수 있는 경로가 다르다. 이 과정을 처리하기 위해서 PrivateRoute를 컴포넌트를 만들어, 로그인한 유저에게는 인증이 완료된 경우에만 접근할 수 있는 페이지(마이페이지)를, 그렇지 않은 사용자가 접근하고자 한다면 다른 페이지로 redirection(회원가입페이지)한다.
컴포넌트 또한 렌더링할 컴포넌트를 prop으로 넘겨받은 후, 로컬스토리지에 저장된 토큰으로 인증이 확인된 유저들만 해당 컴포넌트를 리턴해주도록 한다.

• 사용법

//utils.js
const isLogin = () => !!localStorage.getItem('token') 
export default isLogin;

//PrivateRoute.js
import React from 'react';
import { Route, Redirect } from 'reac#t-router-dom';
import { isLogin } from '../utils';

const PrivateRoute = ({component: Component, ...rest}) => {
    return (

        // Show the component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route {...rest} render={props => (
            isLogin() ?
                <Component {...props} />
            : <Redirect to="/signin" />
        )} />
    );
};

export default PrivateRoute;
          
//PublicRoute.js
    ...      
const PublicRoute = ({ component: Component, restricted, ...rest }) => {
  return (
    <Route {...rest} render={props =>
      (isLogin() && restricted ?
        <Redirect to="/생략" /> :
        <Component {...props} />)} />
  );
};
export default PublicRoute;
          

-> jsx에서 사용가능(상태에 따른 컴포넌트 지정이 가능하다는 말)

//app에 경로 선언
import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import Main from './containers/Main';
import MyPage from './containers/MyPage';
import PublicRoute from './components/PublicRoute';
import PrivateRoute from './components/PrivateRoute';

const App = () => {
  return (
    <Router>
      <Switch>
        <PublicRoute restricted={false} component={Main} path="/" exact />
        ...
        <PrivateRoute component={MyPage} path="/mypage" exact />
      </Switch>
    </Router>);
};
          
export default App;

• history객체를 props로 넘겨받지 않아도 자식 컴포넌트에서 Redirect를 통해 다른 페이지로 이동가능하다.

history.push

• 사용법

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

const Test = () => {
  const history = useHistory();

  const move = () => {
    history.push('/');
  };

  return (
    <div>
      <button onClick={move}>home</button>
    </div>
  );
};

-> jsx에서 사용할 수 없다.

• 히스토리 스택에 이동기록 저장

*history.replace 차이점

push는 경로가 위로 겹겹이 쌓이는 방식이다.
예를들어서 홈->상품->로그인 순으로 경로를 이동했다고 해보자.
로그인창에서 push("/items")을 하면 히스토리는 홈->상품->로그인->상품 순서가 된다.
마지막 페이지에서 뒤로가기 버튼을 누르면 로그인페이지로 돌아가게 된다.

replace는 단어에서 유추할 수 있듯이 제일 위에 있는 경로를 현재 경로로 대체한다.
위의 예시를 똑같이 대입하면 replace("items") 홈->상품->상품 순서가 된다.
마지막 페이지에서 뒤로가기 버튼을 누르면 상품 페이지로 되돌아간다.

❗️ 대부분의 경우에는 히스토리를 남기기 위해서 push를 사용한다.
replace를 사용하는 경우는 이미 로그인한 유저가 로그인페이지로 접근할 경우 돌려보낼 때 사용하는 것이 좋다. 이외에도 올바르지 않은 접근이나 틀린 url로 접근할 때 사용해도 좋다.

• 하위 컴포넌트에서 history객체를 사용하려면 props를 통해 부모로부터 전달받아야 한다.

Link

• 사용법

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

const Test = () => {
  return (
    <div>
      <ul>
      <li><Link to="/">home</Link></li>
      <li><Link to="/item">item</Link></li>
      </ul>
    </div>
  );
};

export default Test;

-> jsx내에서 사용 가능

• a태그와 차이점

  a태그와 사용법도 비슷하지만, a태그 사용시 새로고침이 일어나는 것과 달리 페이지 전체를 리로드하지 않고 필요한 부분만 리로드한다.

• 히스토리객체에 이동 전 경로 저장됨

  history.replace 처럼 경로를 남기지 않게 하려면
  <Link to='/login' replace={true}>로 설정

*NavLink

Link와 비슷하지만, 설정한 url이 활성화되면 특성 스타일 또는 클래스를 지정할 수 있다.

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

const Test = () => {
  const activeStyle = {
    color:'pink',
    background:'grey'
  };
  return (
    <div>
      <ul>
        <li>
          <NavLink exact to="/" activeStyle={activeStyle}>home</NavLink>
        </li>
        <li>
          <NavLink exact to="/item" activeStyle={activeStyle}>item</NavLink>
        </li>
      </ul>
    </div>
  );
};

export default Test;