(React Router) 1. 리액트 라우터 튜토리얼 진행 - Vite를 통한 프로젝트 생성

1. 개요

리액트로 개발을 진행하면서 다른 컴포넌트로의 이동, 주소를 입력했을 때 다른 컴포넌트를 호출 등 라우트(Route) 기능을 구현할 일이 생겼다.

 

라우트는 프론트엔드 개발의 기본 중에 기본이지만, 오랜만에 코드를 손에 잡는 나로서는 아예 기억이 안 난다.

그래서 이번 글은 React Router에 있는 튜토리얼을 직접 진행해보면서 react-router-dom 모듈을 익혀보려고 한다.

 

이 프로젝트를 클론했습니다: https://reactrouter.com/en/main/start/tutorial

Tutorial v6.6.1

 

 

2. 프로젝트 세팅

먼저 프로젝트를 세팅해야한다.

여기서는 특이하게 vite라는 툴을 이용하여 프로젝트를 세팅한다.

vite는 더 빠르고 린한 모던 웹 프로젝트 개발 경험을 제공하는 빌드 툴이라고 한다.

 

뭔지 모르겠으니 일단 써보자.

vite로 프로젝트를 생성하는 방법은 npm, yarn, pnpm이 있다.

나는 npm이 설치되어 있으므로 npm 방법을 따랐다.

 

npm 7 버전 이후에는 더블 대시(--)가 한 번 더 들어가야 한다.

 

터미널:

npm create vite@latest react-router-tutorial -- --template react

나는 프로젝트명(폴더명)을 react-router-tutorial이라고 정했고, vite의 최신 버전을 이용하며 리액트 템플릿을 설치해달라는 명령어를 사용했다.

 

그 이후에 npm install을 통해서 react-router-dom, localforage, match-sorter, sort-by 모듈을 설치했다.

 

방금 생성한 해당 프로젝트로 이동

cd react-router-tutorial

 

위에 명시한 모듈들을 한 번에 설치한다. 설치한 모듈이 여러 개일 때는 공백으로 구분한다.

npm install react-router-dom localforage match-sorter sort-by

 

설치 모듈 설명

1. react-router-dom: 리액트 라이브러리를 위한 여러 기능을 가진 라우팅 라이브러리

2. localforage: 자바스크립트를 위한 빠르고 단순한 저장 라이브러리. 비동기 저장소를 이용하여 웹앱의 오프라인 경험을 향상시켜준다.

3. match-sorter: 자바스크립트 배열(array)을 정렬할 때 사용하는 라이브러리로서 단순하고 기대하는 대로 작동한다. 

4. sort-by: node.js와 브라우저 환경에서 비교하는 함수를 만들 수 있는 라이브러리

 

 

이렇게 설치하고 난 이후에 나의 package.json과 vite.config.js는 다음과 같았다.

 

package.json

{
  "name": "react-router-tutorial",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.1",
    "sort-by": "^1.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "vite": "^4.0.0"
  }
}

 

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

 

먼 미래에 이 글을 봤다면

지금의 나와 버전이 다를 수 있으니 주의하도록.

 

 

 

---

 

3. 참고자료

 

1. react-route

https://github.com/remix-run/react-router

GitHub - remix-run/react-router: Declarative routing for React

 

2. localforage

https://github.com/localForage/localForage

GitHub - localForage/localForage: 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but po

 

3. match-sorter

https://github.com/kentcdodds/match-sorter

GitHub - kentcdodds/match-sorter: Simple, expected, and deterministic best-match sorting of an array in JavaScript

 

4. sort-by

https://github.com/kvnneff/sort-by

GitHub - kvnneff/sort-by: A utility to create comparator functions for the native `Array.sort()`. Allows for sorting by multipl