Router

다른 주소에 따라 다른 뷰를 보여주는 과정을 ‘경로에 따라 변경한다’라는 의미로 라우팅(Routing) 이라고 합니다

React Router 라이브러리의 주요 컴포넌트

• BrowserRouter 라우터 역할 새로고침 하지 않고도 주소를 변경할 수 있는 역할
• Switch와 Route 경로를 매칭해주는 역할

switch 여러 Route 를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할 Switch 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다

Route path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지를 정합니다 Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동합니다 exact 속성을 사용해서 정확히 일치할때만 그 경로로 이동하게 할 수 있습니다

• Link 경로를 변경하는 역할 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 페이지의 주소만 변경해줍니다 a 태그 대신에 사용합니다

// react-router 라이브러리 설치
$ npm install react-router-dom

// react-router 컴포넌트 꺼내오기
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

// React Router 사용
<BrowserRouter>
	<Link to='/'>Home</Link>
	<Link to='/about'>About</Link>

	<Switch>
		<Route exact path='/'>
			<Home />
		</Route>
		<Route path='/about'>
			<About />
		</Route>
	<Switch>
</BrowserRouter>