[Front] React 소스 구현(5) - RouterComponent

본 게시글은 src/component/route/경로의 RouterComponent에 대한 소스 리뷰로써 개인적으로 진행하는 toy project의 일부입니다.

전체 소스

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import UserListComponent from '../user/UserListComponent';
import AddUserComponent from '../user/AddUserComponent';
import EditUserComponent from '../user/EditUserComponent';


const AppRouter=()=>{
	return(
		<div>
			<BrowserRouter>
				<div style={style}>
					<Switch>
						<Route exact path="/" component={UserListComponent}/>
						<Route path="/add-user" component={AddUserComponent}/>
						<Route path="/edit-user" component={EditUserComponent}/>
					</Switch>
				</div>
			</BrowserRouter>
		</div>
	)
}

const style={
	marginTop:'20px'
}

export default AppRouter;

roll

해당 소스는 사용자가 접근하는 path에 따라 어떤 component로 이동할지 분기처리를 진행해주는 Router에 해당하는 부분입니다.

소스 리뷰

1. react-router-dom

import {BrowserRouter, Route, Switch} from 'react-router-dom';

• react-router-dom 사용 목적:
  AS-IS:
  A페이지 > B페이지 이동 시, 그에 맞는 데이터를 fetch한 후, 페이지 로딩 과정 필요
  react-router-dom 사용:
  페이지의 이동 개념이 아닌 싱글 페이지에 상황에 따라 필요한 컴포넌트를 불러와 렌더링하여 출력 (SPA)

• react-router-dom 컴포넌트:
  BrowserRouter:
  HTML5의 History API를 사용해 페이지 새로고침 없이 주소를 변경할 수 있도록 처리해주는 컴포넌트
  Route:
  주소에 따라 다른 화면을 보여주는 라우팅 기능을 가진 컴포넌트
  Switch:
  자식 컴포넌트(React or Redirect) 중, 매치되는 첫번째 요소 렌더링
  해당 컴포넌트를 사용할 경우, BrowserRouter만 사용할 때와 달리 하나의 매칭되는 요소만 렌더링한다는 점을 보장

2. Routing path

<Switch>
	<Route exact path="/" component={UserListComponent}/>
	<Route path="/add-user" component={AddUserComponent}/>
	<Route path="/edit-user" component={EditUserComponent}/>
</Switch>

• 루트경로(/)일 경우:
  UserListComponent로 이동 (유저 리스트 페이지)
• '/add-user'일 경우:
  AddUserComponent로 이동 (유저 추가 페이지)
• '/edit-user'일 경우:
  EditUserComponent로 이동 (유저 수정 페이지)