Archive

React.js Routing

02 Feb 2021 | React

React.js Routing

  1. Routing이란

    • 기존 웹 사이트의 구조는 여러 페이지로 구성되어, 클라이언트가 요청할 때마다 페이지가 새로고침되어 로딩되며 서버로부터 리소스를 전달받아 해석 후 렌더링을 했다
    • 이런 불필요한 트래픽 낭비를 줄이고자 Single Page Application 통칭 SPA가 나오게 되었는데, SPA는 주소에 따라서 다른 뷰를 보여주는 라우팅을 이용한다
    • 클라이언트의 브라우저에서 뷰 렌더링이 이루어지기 때문에 서버의 부하를 줄이고 당연히 속도도 상승한다
    • React에는 공식적으로 라우팅을 지원하는 라이브러리가 없으며 react-router는 써드 파티 라이브러리로 쉽게 라우팅을 구현할 수 있다
    • react-router-dom 패키지는 웹 개발에 쓰이는 컴포넌트를 지원하며 react-router-native는 앱 개발 컴포넌트를 지원한다. react-router는 이 둘을 합친 것이다

  2. Routing

    • npm install –save react-router-dom
    • BrowserRouter는 HTML5의 History API를 이용하여 새로고침 없이 주소변경이 가능하도록 해준다
    • Route에는 exact라는 옵션이 있다. exact는 path와 정확히 경로가 일치해야 render가 된다. Route는 동일한 path로 여러 개 설치가 가능하기 때문에 이 옵션을 이용해서 항상 보여줄 menu bar 등을 깔아둘 수 있다
    • Route의 렌더링 방식은 두 가지. 일반적으로 component를 많이 쓴다. render는 hard-coding이 필요한 경우
    // Root Component
import { BrowserRouter } from 'react-router-dom';
   
const Root = () => (
	// Root Component를 BrowserRouter 적용
    <BrowserRouter>
    	<App />
    </BrowserRouter>
);

    import { Route } from 'react-router-dom';
   
<Route path='/' exact component{Posts} />
<Route path='/about' render={() => <h1>안녕</h1>};


  3. Link

    • re-load는 현재 state 값을 잃어버리는등 자원 소실의 우려가 있고 처음부터 다시 rendering이 진행된다
    • re-render만으로 페이지 이동이 가능해야한다
    • Router의 Link 태그는 이 부분을 해결해준다, a 태그를 Link 태그로 바꾸자
    <Link to='/'>Home</Link>
<Link to>about</Link>


  4. withRouter

    • 일반 컴포넌트에서 라우터에서 사용하는 객체(history, match, location 등)에 접근하려면 withRouter라는 HOC(고차원 컴포넌트)를 사용해야한다.
    • 이를 통해 컴포넌트에서 라우터를 제어할 수 있게 된다
    • 뒤로가기 구현, Link 없이 화면 렌더링을 하는 등 다양하게 이용할 수 있다
    import { withRouter } from 'react-router-dom';
/*
	...
*/
export default withRouter(componentName);


  5. Absolute Path vs Relative Path

    • Link 태그의 to=’xxx/xxx’ 는 기본적으로 절대경로이다
    • 절대경로는 항상 도메인 바로 뒤에 붙는다
    • 절대경로는 to=’posts’ 뒤에 추가하기 위해 to=’new’를 사용해도 com/posts/new가 아닌 com/new로 이어진다
    • 기존 경로에 무언가를 추가할 때 상대경로를 사용할 수 있다
    • 이때 props.match를 사용할 수 있다
    • /posts가 링크된 컴포넌트에서 to={props.match.url + ‘/new’}를 사용하면 com/posts/new에 무언가를 추가할 수 있다

  6. NavLink

    • Link와 기능은 유사하지만 NavLink가 활성화되면 active 클래스가 생성되고 이를 통해 스타일을 지정할 수 있다
    • NavLinkt의 property로 activeClassName=’xxx’을 주게 되면 클래스 이름도 사용자 정의가 가능하다
    • activeStyle= 등 css를 이용하지 않고 inline으로도 style 정의가 가능하다
    • exact 옵션 추가 가능

  7. Switch

    • react-router-dom 패키지의 Switch 컴포넌트를 사용하면 여러 Route 컴포넌트들이 중첩되어 렌더링되는 것을 막을 수 있다
    • Switch는 매칭되는 첫 번째 Route만 보여주고 더 이상 분석하지 않는다
    • 이를 사용하기 위해서는 Route들의 상위 컴포넌트로 Switch 컴포넌트를 감싸기만 하면 된다



참고 자료

reactjs.org - 공식홈페이지

Udemy - React The Complete Guide

React Router - VELOPERT

리액트 라우터와 서버사이드 렌더링

Related Posts