React | 동적 라우팅, 라우터 기초

신세원·2020년 11월 22일
0

React

목록 보기
20/28
post-thumbnail

# router란?

우리는 리액트를 배우면서 가장 기본적인 컴포넌트에 대해 알아보았다.
그치만 컴포넌트만 가지고는 웹 페이지를 만들 수 없다. 그 이유는 리액트는 페이지가 하나이기 때문이다. 페이지 깜박임 없이 하나의 페이지만으로 동작하는 싱글 페이지 애플리케이션이 유행이었던 적이 있지만, 주소가 없으므로 특정 페이지에 접속하기 힘들고 북마크를 할 수 없다는 단점이 있었다.

angular이나 angular2, backbone같은 프레임워크는 프레임워크이기 때문에 라우팅 기능이 기본적으로 들어있지만, react는 view만 담당하는 라이브러리이다.
그래서 라우팅을 담당하는 react-router을 따로 설치해주어야 한다.

react-router를 사용하면 싱글 페이지 애플리케이션과 같이 페이지 깜박임이 없으면서도 주소를 가질 수 있게 된다.
일반 홈페이지는 페이지를 넘길 때 페이지가 깜박이면서 다음으로 넘어가지만, 제 홈페이지는 레이아웃은 고정되어 있고 주소도 바뀌고 내용만 바뀐다. 이것을 가능케 하는 것이 react-router이다.

1. 설치

npm install react-router-dom

2. 라우팅 코드

react-router 는 계층구조로 설정할 수가 있다.

  • 최상위에 Router 컴포넌트를 만들고 Route(실제 path에 따라 컴포넌트를 교체해주는 역할) 그리고 또 그 아래에 IndexRoute가 있고 여러개의 Route 컴포넌트가 존재한다.
  • 어떤 url 이 브라우저에 입력되면(또는 <a> 태그가 클릭되면), 각 라우터에 해당하는 컴포넌트가 렌더링 되는 구조이다.

http://localhost:3000/second url 이 브라우저에 입력되면

  1. path/인 라우트를 먼저 찾고 렌더링 한다.
  2. 뒤에 해당되는 second를 찾아서 해당되는 컴포넌트를 렌더링 한다.

App.js 파일의 App 클래스를 보면, Header 컴포넌트 아래에 {this.props.childern}이 있는데, 이 부분이 바로 path/인 라우트 아래의 IndexRoute, first, second, third 인 부분이 렌더링 되는곳 이다.

마지막으로 라우터의 히스토리는 browserHistory 에 저장해 둔다.
그래야 브라우저에서 뒤로가기를 했을때 이전 페이지를 불러올 수 있기 때문이다.

사용 방법을 보기 쉽게 정리해 보자.

  • 라우터 기능을 할 수 있게 Routes Component를 만든다.
  • import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'를 삽입한다.
  • Route로 이동할 페이지들을 import한다.
  • Switch문 안에 라우터 코드를 작성한다.
  • path 프로퍼티에 루트 이하 경로를 지정, component 프로퍼티에 해당 페이지 컴포넌트를 연결한다.
  • <BrowserRouter> : 최상위 컴포넌트를 감싸준다.
  • <Switch> : /일때, /하위 경로일때 모두 화면에 출력되지 않도록 한다.
    <Route exact path='/'....>: exact는 이하 경로를 중복 출력하지 않도록한다.

third 뒤의 :id 부분은 컴포넌트의 this.props.params.id 형태로 전달되어 컴포넌트 내에서 사용할 수 있다.

3. 페이지 전환

<Link /> 태그로 작성하게 되면 리액트는 빌드가 될때 <a>태그로 자동 변환된다.
<a> 태그와 마찬가지로 <Link> 태그도 지정한 경로로 바로 이동시켜주는 기능을 한다.

<a> vs <Link>

  • <a> - 외부 사이트로 이동하는 경우
  • <Link> - 프로젝트 내에서 페이지 전환하는 경우

2) withRouter

이 방식은 특정 이벤트에서 페이지 전환이 있을 경우 사용하면 좋다.
사용 방법은, 이벤트 함수 안에 props.history.push('/경로'); 라고 지정하면 브라우저 주소창에 ('/경로') 부분이 추가 된다.


그리고 마지막에 export 부분에는 위와 같이 꼭 적어줘야 한다.
링크보다 복잡하지만 이벤트와 함께 페이지 이동해야 한다면 꼭 쓰게되는 기능이다.

profile
생각하는대로 살지 않으면, 사는대로 생각하게 된다.

0개의 댓글