1/ React router

스터디 공유용 자료입니다.
http://slides.com/woongjae/react-router#/ 참고하였습니다.

리액트는 SPA위한 자바스크립트 라이브러리이기 때문에, 클라이언트 사이드 렌더링과 클라이언트 사이드 라우팅이 필요합니다.

• react-router는 하나의 라이브러리이다. +
• 다른 router라이브러리도 있고, 직접 만들 수 있다.
• 페이스북에서 공식적으로 나온 라이브러리는 아니지만, 많은 사람들이 쓰고 있는 라우터 라이브러리이다.
• react router v3는 다르다고 봐야한다.
• react-router와 react-router-dom이 나눠져 있는 이유는 리액트 네이티브에서도 사용하기 위해서이다.

리액트 라우터를 사용하는 이유

• 여러 페이지들이 존재하는 서비스를 만들때 필요.
• url 주소나 특정상태에 따라서 view를 나누기 위해서 사용한다.

---

라우터의 여러 API

자주 사용하는 API를 봅시다.

가장 기본셋팅

1. BrowserRouter
2. Link
3. Route

셋팅하기

create-react-app 프로젝트이름 --scripts-version=react-scripts-ts

react-router-dom을 설치하자.

yarn add react-router-dom

type definition 추가.

yarn add @types/react-router-dom

2. css 프레임워크를 붙여봅시다.
   https://react.semantic-ui.com/

   yarn add semantic-ui-react
   yarn add semantic-ui-css

css import는 최상위 컴포넌트에서

• css는 전역으로 설정됩니다.

3. import 허락

   "allowSyntheticDefaultImports": true

1. <BrowserRouter>

import { BrowserRouter as Router, Route, Link} from 'react-router-dom'

• 브라우저 히스토리를 이용해서 구현할 라우터
• 하나의 자식만을 가질 수 있기 때문에, div로 감싸야한다. 아니면 자식이 여러명이라는 에러가 뜸.
• 다른 라우팅 컴포넌트(Route, Link)를 사용하기 위해서 기본적으로 감싸줘야 함
• window.history.pushState()로 동작하는 라우터 (리로드 없이 주소만 갱신하는 함수)
• 이와 비슷하게 HashRouter는 Hash(#/)으로 동작하는 Router임

2. <Link>

HTML의 a태그와 유사하다.

• 로 렌더링되고 사용법도 비슷하지만,
• 실제 동작은 와 다르게 페이지 전체를 리로드하지 않고
• 필요한 부분만 리로드하게 됨

  <Link to="/" />

3. <Route>

• path 속성으로 경로지정
• render, component, children 속성으로 렌더링
• 실제 경로가 지정한 경로와 완벽히 매치되지 않더라도, 경로를 포함만 해도 렌더링
• 정확히 매칭될 때만 렌더하고 싶은 경우 exact 옵션 사용
• 컴포넌트에 match, location, history라는 객체를 넘김

exact={true}

<Route> props 알아보기

const Post = (props: RouteComponentProps<{ postId: string }>) => {
  return (
    <h3>Post: {props.match.params.postId}</h3>
  );
};

match 객체

의 path에 정의한 것과 매치된 정보를 담고있음

location 객체

브라우저의 window.location 객체와 비슷함
URL을 다루기 쉽게 쪼개서 가지고 있음

history 객체

브라우저의 window.history 객체와 비슷함
주소를 임의로 변경하거나 되돌아갈 수 있음
주소를 변경하더라도 SPA 동작방식에 맞게 페이지 일부만 리로드

4. <Redirect>

• 말그대로 Redirect를 하는 컴포넌트
• 마운트 되면 지정한 경로로 이동함
• 기본적으로 replace 방식
• location 객체를 통해 리다이렉트 할 수도 있음

  if (!window.localStorage.token) {
        return <Redirect to="/login" />
      }
      return (
        <div>
          <Switch>
            <Route
              exact
              path="/"
              component={HomePage}
            />
            ...
          </Switch>
        </div>

5. withRouter

withRouter HOC를 통해 히스토리 객체의 속성과 의 match에 액세스 할 수 있습니다. withRouter는 render props : {match, location, history}와 같은 props로써 ㅇ라우트가 변경할 때마다 해당 구성 요소를 다시 렌더링합니다.

6. Switch

• <Route>를 감싸서 사용
• JavaScript의 switch 문과 비슷
• 중 매치되는 첫번째만 렌더
• 에 path를 지정하지 않은 경우, 매치되는 컴포넌트가 없을 때 렌더
• 따라서 순서에 유의해야함

  <Switch>
    {/* intro페이지 & 네비게이션 없는 페이지 */}
    <Route
      path="/login"
      component={LoginPage}
    />w
    {/* 서비스 페이지 (로그인 이후 접근 가능) & 네비게이션 있는 페이지*/}
    <Route
      path="/share"
      component={SharePage}
    />
    <Route path="/" component={App} />
  </Switch>

<Switch>
  <Route
    exact
    path="/"
    component={HomePage}
  />
  <Route
    path="/diary"
    component={DiaryPage}
  />
  <Route
    path="/report"
    component={ReportPage}
  />
  <Route
    path="/weight"
    component={WeightPage}
  />
  <Route
    path="/search/:sc"
    component={SearchResultPage}
  />
  <Route
    path="/search"
    component={SearchPage}
  />
  <Route
    path="/recipe/:id"
    component={RecipePage}
  />
  <Route component={NotFoundPage} />
</Switch>

7. NavLink

• 조금 특별한
• to에 지정한 path와 URL이 매칭되는 경우,
• 특별한 스타일, 클래스를 적용할 수 있음

쉬어가기

• 모달을 달아보면서 state개념잡기.

---