출저
- React 공식문서
- 위코드 수업자료
Why use React Router?
- Routing 이란 경로를 지정해주고 그에 따라 다른 view(화면)를 보여주는것.
- 하지만, 리액트에 내장되어 있지 않기 때문에 리액트에서 가장 많이 사용되는
React-router라이브러리를 설치하여 사용한다.
React Router, and dynamic, client-side routing, allows us
to build a single-page web applicationwithnavigation without the page refreshing as the user navigates.
결국엔, SPA(single page application) 을 위해 페이지 이동을 좀 더 매끄럽게 하기위해 쓰는 third party library 이다.
Router 사용하기
npm 을 이용하여 설치
npm install react-router-dom --save
Router 위치
When not using React Router, App is often the highest parent component in React apps. With React Router, however, the Router component needs to be the highest parent. This just lets all of the component use the power of Router, because as a parent, it passes down all of its props to its children, and thus the entire application.
라우터 컴포넌트 가장 부모위치에 있어야 하는데 그 위치에서 아래 자식 컴포넌트들에게 props 를 내려줘야 하기 때문이다. 이는 전체 어플리케이션에게 전달되는 것과 같은 의미이다.
Routes컴포넌트 만들어 주기.
아래와 같이 필요한 Router 와 경로에 추가해줄 컴포넌트를 import 해준 뒤, render()안에 Route라는 이름의 태그에 넣어준다.
index.js 에 넣어주기.
ReactDOM.render(<Routes />, document.getElementById('root'));
Route 이동하기
Route 이동하는 방법은 두 가지가 있는데,
- 컴포넌트 사용하는 방법
- withRouterHOC 로 구현하는 방법
<Link to="/Signup">
- 간단하게 Routes.js에서 설정한 path값을 Link 태그의 to attribute를 사용한다.
- 참고로, Link태그는 scss에서 a 태그로 속성을 지정하여 사용할 수 있지만, render()안에서 a 태그를 직접사용하지 않도록 한다.
<a>: 외부 사이트로 이동하는 경우 사용.
<Link>: 프로젝트 내에서 컴포넌트로 이동하는 경우 사용.
withRouterHOC 로 구현하는 방법
- onClick 이벤트를 통해 페이지를 이동하는 방법이다.
- 위 이벤트 함수 안에 this.props.history 를 이용하여 접근한다.
두 방법의 다른점
<Link>- 클릭 시 바로 이동하는 로직 구현 시에 사용.
- Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 상세 페이지로 이동.
withRouterHOC- 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현한다.
- ex. 로그인 버튼 클릭 시
- Backend API로 데이터(User Info) 전송
- User Data 인증 / 인가
- response message
- Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
- Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동
