리액트 라우터와 코드 스플리팅

Tony·2021년 7월 23일
React
0

react

목록 보기
8/86
post-custom-banner

리액트 라우터와 코드 스플리팅

  • key words
    • 리액트 라우터
    • 웹팩 설정
    • code splitting : 프로젝트 코드를 빌드 할 때 여러파일로 저장
  • contents
    • 리액트 라우터 사용해보기
      • SPA에 대해 이해, 리액트 라우터(v4)를 사용하여 여러종류의 라우팅 방법 알아보기
    • 코드 스플리팅 사용하기
      • 웹팩 설정을 통하여 코드를 여러개 파일로 분리시키는 방법
      • 이를 통해 특정 라우트에서 필요한 어플리케이션 데이터만 불러와서 사용 가능
        • 트래픽 아끼고, 로딩속도 개선

1. 리액트 라우터 사용해보기

SPA 란?

정보가 많아짐에 따라 서버에서 그려서 뷰를 보여주던 기존의 방식이 속도가 느린 문제가 있었음
이를 해소하기 위해 캐싱과 압축을 하여 제공하기도 함
하지만 인터렉션이 많은 모던 웹 앱에선 충분하지 못 할 수도 있음
렌더링을 서버에서 담당 : 서버자원 사용, 불필요한 트래픽 낭비

SPA는 하나의 화면만 있는게 아님
화면에 따라 주소도 만들어 줘야 함 : 라우팅
리액트는 라우팅이 내장되어 있지 않아서 직접 브라우저의 PI를 사용하고 상태를 설정하여 다른 뷰를 보여줘야 함

react-router : 써드 파티 라이브러리

  • CSR(client side rendering)에서 이뤄지는 라우팅을 간단하게 함
  • SSR(server side rendering)을 도와주는 도구들도 포함되어 있음
  • react-native에서도 사용 가능

SPA의 단점

앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커짐
유저가 실제로 방문하지 않을 수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문

  • codesplitting을 사용하면 라우트 별로 파일들을 나눠서 트래픽과 로딩속도를 개선할 수 있음

1-1. 프로젝트 구성하기

  • 참고 문헌 참고
  • 절대경로를 script에서 NODE_PATH로 적용하는 것은 deprecated 되었다.
    • jsconfig.json을 package.json파일과 같은 위치에 놓고 아래 설정을 해줘야 한다.
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": ["src"]
}

1-2. Route와 파라미터

라우트 파라미터 읽기

  • path : 현재 경로 표시 : /about 에 있으면 -> "/about"
  • history : push, replace를 통해 다른 경로로 이동하거나 앞, 뒤 페이지로 전환 할 수 있음
  • location
    • 현재 경로에 대한 정보를 지니고 있음
    • URL쿼리(/about?foo=bar 형식) 정보도 가지고 있음
  • match
    • 어떤 라우트에 매칭이 되었는지에 대한 정보
    • params(/about/:name 형식) 정보를 가지고 있음

라우터 경로 설정 방법 1. Switch 이용(react-router-dom)

            <div>
                <Route exact path="/" component={Home}/>
                <Switch>
                    <Route path="/about/:name" component={About}/>
                    <Route path="/about" component={About}/>
                </Switch>
            </div>

라우터 경로 설정 방법 2. 물음표 기호 붙이기

  • 생략했을 때도 매칭한다는 뜻
            <div>
                <Route exact path="/" component={Home}/>
                <Route path="/about/:name?" component={About} />
            </div>

URL 쿼리 가져오기

1-3. 라우트 이동하기

앱 내부 페이지를 이동하는데 일반적인 <a href="https://anyURL.com"></a> 형식으로 만들면 새로고침 됨

import { Link } from 'react-router-dom';
<Link to="/about">About</Link>

와 같이 Link를 사용

설정한 URL이 활성화가 되면, 특정 스타일 혹은 클래스를 지정 가능
Router처럼 NavLink도 exact를 속성값으로 붙여 줘야 함

<NavLink exact to="/about" activeStyle={activeStyle}>About</NavLink>
// 클래스로 설정하고 싶다면 activeStyle 대신 activeClassName 을 설정

1-4. 라우트 속 라우트

// router 
<Route exact path="/" component={Home} />
<Switch>
  <Route exact path="/about/:name" component={About} />
  <Route exact path="/about" component={About} />
  <Route exact path="/posts" component={Posts} />
  <Route exact path="/posts/:id" component={Posts} />
</Switch>

// 라우트 속 라우트 (Posts.js)
<div>
  <h2>Post List</h2>
    <ul>
      <Link to="/posts/1">Post #1</Link>
      <Link to="/posts/2">Post #2</Link>
      <Link to="/posts/3">Post #3</Link>
      <Link to="/posts/4">Post #4</Link>
    </ul>
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select any post</h3>}
    />
    <Route path="/posts/:id" component={Post} />
</div>

웬만하면 exact를 라우터에 붙이고 모든 경로를 다 써주고
설정안한건 404로 빼는게 낫겠다.

1-5. withRouter

라우트가 아닌 컴포넌트에서 라우터에서 사용하는 객체 - location, match, history를 사용하려면 withRouter라는 HoC를 사용
1. 사용하는걸로 test
2. 빼고 hooks(useLocation)로 test

둘다 정상 동작

새삼 next.js에서 라우터를 다 잡아주는게 정말 편하다는 걸 느꼈다.

2장. 코드 스플리팅(Code Splitting)

SPA의 단점 중 하나는 사용하지 않을 수 있는 페이지의 자바스크립트까지 한꺼번에 번들링하여 초기 로딩속도가 느릴 수 있다는 점이다.
코드 스플리팅으로 번들파일을 여러개의 파일로 분리 시킬 수 있다.

2-1. 코드 스플리팅의 기본

코드 스플리팅의 원리 : 한개의 파일에서 모든걸 불러오는게 아닌, 우리가 설정하는 대로, 라이브러리나 컴포넌트가 실제로 필요해질 때, 나중에 불러오는 것
npm run eject

eject 하려는데 fail이 되었다.

This git repository has untracked files or uncommitted changes:

src/App.js
M src/pages/Posts.js
M src/pages/index.js
jsconfig.json

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-router-tutorial@0.1.0 eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-router-tutorial@0.1.0 eject script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\TVCF\AppData\Roaming\npm-cache\_logs\2021-07-26T00_44_35_572Z-debug.log

This git repository has untracked files or uncommitted changes:

git을 commit을 하지 않은 파일들이 존재할 때 뜨는 에러이다.
commit, push를 한 뒤엔 정상적으로 eject가 된다.

Vendor

vendor : 공급업체

코드 스플리팅을 하려면 Vendor 설정을 해줘야 함
프로젝트 전역적으로 사용되는 라이브러리 분리 : Vendor 파일

  • react, react-dom, redux, react-redux, ... 등
    프로젝트 전체에서 꼭 필요한 라이브러리들을 넣어줌
    • webpack.config.dev.js 파일의 entry 부분

webpack.config.dev.js 파일이 존재 하지 않음

일단 벨로퍼트님이 2017년에 정리한 글을 계속 따라가며 읽어보고
현재 코드스플리팅 방식이 바뀌었다면 어떻게 바뀌었는지
또 next js에서 하는 방식과 CRA에서 하는 방식은 어떻게 다른지 알아보자.

  • 이 부분은 블로그에 글을 따로 분리해서 올리겠다.
  • 참고 : https://velog.io/@velopert/react-code-splitting
  • 아래에서도 동일하게 dynamic import로 코드스플릿팅을 하고 있으니 따로 글을 작성하지 않아도 될 것 같다.

2-2. 비동기적 코드 불러오기 : 청크 생성

청크(chunk) : 코드를 비동기적으로 불러오면 웹팩에서 처리하면서 코드를 분리

비동기적으로 파일을 불러오기 위해, import를 최상단에 사용하는 것이 아니라, 특정 함수에서 불러오도록 작성(dynamic import)

코드 스플리팅을 할 때마다 상태관리를 해주긴 번거로움

  • asyncComponent 를 사용

2-3. 라우트 코드 스플리팅 하기

웹팩 설정하는 방법은 따로 공부해야겠다.
eject 시 webpack.config.dev.js, webpack.config.prod.js 파일이 생성이 안되고
webpack.config.js 만 생성 됨

참고 문헌

profile
Tony
움직이는 만큼 행복해진다
이전 포스트

next app react not found issue

다음 포스트

react-cookie 라이브러리

post-custom-banner

0개의 댓글