React Router에 대한 이야기 - 3

파견근로자·2022년 2월 23일

React일지

목록 보기

3/3

들어가기에 앞서

2편 (React Router에 대한 이야기 -1)
(https://velog.io/@lgr6952/React-Router%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%EC%95%BC%EA%B8%B0-2)

SideBar Menu를 구현해야하는 요구사항이 있었다.
왼쪽에 사이드바를 구현하고 클릭하는 시점에 화면이 이동되는 형태로 구현이 필요했다.
Sidebar Menu의 경우 Component를 주입하여 개발했던 경험이 있었지만, 뒤로가기, 외부에서 해당 메뉴로 바로 진입등 url을 통한 접근이 필요한 상황이었다.
System에 적용되어있는 Connected-React-Router를 활용하여 SideBar를 구성하면서 겪었던 내용을 정리하고자 한다.

React Router란 무엇인가

History Stack을 조작할 수 있어야 한다.

Url과 Route를 일치시킬 수 있어야 한다.

해당 Route에 맞는 UI Component를 불러올 수 있어야 한다.

오늘은 3번 '해당 Route에 맞는 UI Component를 불러올 수 있어야 한다.' 에 대한 이야기를 해보려고 한다.

3. 해당 Route에 맞는 UI Component를 불러올 수 있어야 한다.

route가 관리되는 방법

지난번 2편에서 url과 Route를 일치시키는 방법에 대해 배웠다.
이번에는 해당 router가 어떤방식으로 동작하는지 자세하게 알아보고 어떻게 컴포넌트가 렌더링되는지 그 과정에 대해 이해해보는 시간을 갖고자 한다.

import React from 'react';
import {Switch, Route, BrouserRouter} from 'react-router-dom';

const App = (props) => {
  // BrouserRouter가 선언되면 Router Component 렌더링시 History 객체를
  // props로 전달한다.
  // 전달받은 History 객체를 구독하여 url 변경을 감지한다.
  // Router Component는 마운트되는 순간 url과 관련된 정보를 context로 구성한다.
  // 해당 context는 history객체, match객체, location객체등으로 구성된다.
	<BrouserRouter>
        <Switch>
          // Route는 props로 전달받는 path의 값이 브라우저의 현재
          // URL과 매칭 될 때 특정 컴포넌트를 렌더링 하는 컴포넌트이다.
          // Route는 RouterContext를 참조하고있으며 context의 location과
          // props의 path 값을 비교한다.
          // 이때 일치할 경우 element(component)를 렌더링한다.
            <Route path="/경로" element={컴포넌트1} />
            <Route path="/경로1" element={컴포넌트2} />
        </Switch>
    </BrouserRouter>
}

export default App;

// 클릭시 history api를 통해 해당 경로로 이동한다.
// a tag로 구성되어있으나 페이지 이동부분의 동작을 안하고 
// History Api를 통해 url을 변경한다.
<Link to={'/경로'} >이동</Link>

import React, {useEffect} from 'react';
import queryString from 'query-string';

const 컴포넌트1 = ({history, location, match}) => {
  // 위 Router를 통해 컴포넌트1이 호출되게되면 props로 3개의 객체가 전달된다.
  // {history, location, match}
  // queryString을 통해 get 방식의 parameter를 가져올 수 있다.
  // ex) url : http://localhost:8080?name=1
  const query = queryString.parse(location.search);
  // query = {name : 1}
  
  useEffect(() => {
    console.log('history', history);
    /*{
        length: 1
        action: "POP"
        location: Object
        createHref: ƒ createHref() {}
        push: ƒ push() {}
        replace: ƒ replace() {}
        go: ƒ go() {}
        goBack: ƒ goBack() {}
        goForward: ƒ goForward() {}
        block: ƒ block() {}
        listen: ƒ listen() {}
    }*/
  }, [])
}