우리는 리액트를 배우면서 가장 기본적인 컴포넌트에 대해 알아보았다.
그치만 컴포넌트만 가지고는 웹 페이지를 만들 수 없다. 그 이유는 리액트는 페이지가 하나이기 때문이다. 페이지 깜박임 없이 하나의 페이지만으로 동작하는 싱글 페이지 애플리케이션이 유행이었던 적이 있지만, 주소가 없으므로 특정 페이지에 접속하기 힘들고 북마크를 할 수 없다는 단점이 있었다.
angular이나 angular2, backbone같은 프레임워크는 프레임워크이기 때문에 라우팅 기능이 기본적으로 들어있지만, react는 view만 담당하는 라이브러리이다.
그래서 라우팅을 담당하는 react-router을 따로 설치해주어야 한다.
react-router를 사용하면 싱글 페이지 애플리케이션과 같이 페이지 깜박임이 없으면서도 주소를 가질 수 있게 된다.
일반 홈페이지는 페이지를 넘길 때 페이지가 깜박이면서 다음으로 넘어가지만, 제 홈페이지는 레이아웃은 고정되어 있고 주소도 바뀌고 내용만 바뀐다. 이것을 가능케 하는 것이 react-router이다.
npm install react-router-dom
react-router 는 계층구조로 설정할 수가 있다.
path
에 따라 컴포넌트를 교체해주는 역할) 그리고 또 그 아래에 IndexRoute가 있고 여러개의 Route 컴포넌트
가 존재한다. <a>
태그가 클릭되면), 각 라우터에 해당하는 컴포넌트가 렌더링 되는 구조이다.http://localhost:3000/second
url 이 브라우저에 입력되면
path
가/
인 라우트를 먼저 찾고 렌더링 한다.- 뒤에 해당되는 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'
를 삽입한다.Switch
문 안에 라우터 코드를 작성한다.<BrowserRouter>
: 최상위 컴포넌트를 감싸준다.<Switch>
: /일때, /하위 경로일때 모두 화면에 출력되지 않도록 한다.<Route exact path='/'....>
: exact는 이하 경로를 중복 출력하지 않도록한다.third
뒤의 :id
부분은 컴포넌트의 this.props.params.id
형태로 전달되어 컴포넌트 내에서 사용할 수 있다.
<Link />
<Link />
태그로 작성하게 되면 리액트는 빌드가 될때 <a>
태그로 자동 변환된다.
<a>
태그와 마찬가지로 <Link>
태그도 지정한 경로로 바로 이동시켜주는 기능을 한다.
<a>
vs<Link>
<a>
- 외부 사이트로 이동하는 경우<Link>
- 프로젝트 내에서 페이지 전환하는 경우
이 방식은 특정 이벤트에서 페이지 전환이 있을 경우 사용하면 좋다.
사용 방법은, 이벤트 함수 안에 props.history.push('/경로');
라고 지정하면 브라우저 주소창에 ('/경로')
부분이 추가 된다.
그리고 마지막에 export 부분에는 위와 같이 꼭 적어줘야 한다.
링크보다 복잡하지만 이벤트와 함께 페이지 이동해야 한다면 꼭 쓰게되는 기능이다.