react-router-dom 사용법 알아보기

younoah·2022년 1월 18일

[React]

목록 보기

6/6

① 프로젝트에 라우터 적용

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

프로젝트의 가장 최상단인 index.jsx 에서 BrowserRouter 를 적용하면 자식에서 라우팅 기능을 사용할 수 있다.

② Route: 특정 주소에 컴포넌트 연결하기

<Route path="주소규칙" component={보여주고싶은 컴포넌트}> // 컴포넌트 방식
<Route path="주소규칙" component={() => JSX}> // JSX 렌더링 방식

JSX 렌더링 방식을 이용하면 props나 기타 값들을 전달할 수 있다.

③ Switch: 규칙이 일치하는 라우트 단 하나만 렌더링하기

Switch 는 여러 Route 들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다.

Switch 를 사용하면, 아무것도 일치하지 않았을때 보여줄 Not Found 페이지를 구현 할 수도 있다.

예시

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles">프로필 목록</Link>
        </li>
        <li>
          <Link to="/history">예제</Link>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route path="/" exact={true} component={Home} />
        <Route path="/about" component={About} />
        <Route path="/profiles" component={Profiles} />
        <Route path="/history" component={HistorySample} />
        <Route
          // path 를 따로 정의하지 않으면 모든 상황에 렌더링됨
          render={({ location }) => (
            <div>
              <h2>이 페이지는 존재하지 않습니다:</h2>
              <p>{location.pathname}</p>
            </div>
          )}
        />
      </Switch>
    </div>
  );
};

exact 란? /about , /profiles , /history path규칙은 / 와 매칭된다. 따라서 정확하게 / 일때만 동작하도록 명시하는 prop이다.

만약 그냥 작성하면??

<Router>
  <Route exact path="/" component={Home} />
  <Route path="/movies" component={Movies} />
  <Route path="/reviews" component={Reviews} />
  <Route component={PageNotFound} />
</Router>

어떤 url이던지 PageNotFound 컴포넌트가 보여지게 된다. 이런 문제를 해결하기 위해서 Switch 를 사용한다.

④ Link: 클릭하면 다른 주소로 이동시키기

<Link to='주소규칙'>자식</Link>

다른주소로 이동하는 방법

<a href="...">...</a>
- 주의점으로는 페이지를 아예 새로 불러오기 때문에 리액트 앱이 지니고 있는 상태들도 초기화되고 렌더링된 컴포넌트도 모두 사라진다.
- 사용 금지!
Link 컴포넌트 사용
- 브라우저의 주소만 바꿀뿐 페이지를 새로 불러오지는 않는다.

⑤ 파라미터와 쿼리

파라미터: /profiles/younoah
쿼리: /about?details=true

파리미터

파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용

/profiles/detail
<Route path="/profiles/detail" component={Profile} /> // detail 얘는 경로
<Route path="/profiles/:username" component={Profile} /> // 얘는 파라미터

쿼리

쿼리는 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용

/about?q=검색키워드

⑥ useReactRouter Hook 사용하기

useReactRouter Hook 이란?

현재 경로에 대한 match / location / history 를 사용을 제공하는 훅이다.

import {
  useHistory,
  useLocation,
  useParams,
  useRouteMatch,
} from 'react-router-dom';

function RouterHookSample() {
  const history = useHistory();
  const location = useLocation();
  const params = useParams();
  const match = useRouteMatch();

  console.log({ history, location, match, params });

  return null;
}

export default RouterHookSample;

⑦ history, location, match

history

history 객체는 브라우저의 history와 유사하다. 스택(stack)에 현재까지 이동한 url 경로들이 담겨있는 형태로 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다.

action: 최근에 수행된 action(push, pop, replace)
- push : 새로운 URL이 history에 추가, 새로운 주소로 이동할 때
- pop : 새로운 URL이 history에서 제거, 뒤록 가기
- replace : 최근 경로를 histroy 스택에서 replace해서 페이지 이동
block(propt): history 스택의 push와 pop 동작을 제어
go(n): history 스택의 포인터를 n으로 이동
goBack(): 이전 페이지로 이동
goForward(): 앞 페이지로 이동
length: 전체 history 스택의 길이
location: 현재 페이지의 정보
push(path, state): 새 경로를 history 스택에 push해서 페이지 이동
replace(path, state): 최근 경로를 histroy 스택에서 replace해서 페이지 이동

match

match 객체에는 Route path와 URL의 매칭에 대한 정보를 가지고 있다.

isExact: true이면 경로가 완전히 정확할 경우에만 수행한다.
params: 경로에 전달된 파라미터 값을 가진 객체
- <Route path="/profiles/:username" component={Profile} /> 에서 넘겨받은 파리미터
- path : 현재 경로
- url : 실제 경로
path: Route에 정의된 경로
url: 클라이언트로부터 실제 요청 받은 경로