React 시작하기

node.js, npm 설치

vscode 확장 프로그램 설치

eslint, prettier, reactjs code snippets(charalampos)

프로젝트 생성

$ npx create-react-app 프로젝트이름

디렉토리 이동

$ cd 프로젝트이름

react 개발 서버 구동

$ npm start

http://localhost:3000/

router 라이브러리 설치

$ npm i react-router-dom

router 사용

• BrowserRouter 컴포넌트
  컴포넌트로 감싸 라우터 적용

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
...
</BrowserRouter>

• Route 컴포넌트
  특정 주소에 컴포넌트 연결

// 기본 형태
<Route path="/주소" component={컴포넌트} />

// 하나의 route에 여러개의 path 설정
<Route path={['/주소1', '/주소2']} component={컴포넌트} />

import { Route } from 'react-router-dom';
import Home from './components/Home.js';
import About from './components/About.js';

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />

exact (또는 exact={true}) :
경로가 "/"일 때 다른 경로에서도 "/"가 포함되기 때문에 exact 속성을 설정해준다.

• Link 컴포넌트
  다른 주소로 이동

// 기본 형태
<Link to="주소">이름</Link>

import { Link } from 'react-router-dom';

<Link to="/">Home</Link>
<Link to="/about">About</Link>

<a>태그는 페이지 전체를 새로 불러오기 때문에 사용하지 않는다.

참조

-리액트를 다루는 기술, 길벗