[리액트, 스프링부트 연동하여 CRUD 구현] #5 - Routing Component 생성 및 파일 정리 (5/10)

리액트, 스프링부트 연동하여 CRUD 구현하기

#5 Routing Component 생성 및 파일 정리

이번엔 우리가 작성하고있는 리액트 앱에 라우팅을 적용하려 합니다. 리액트에서는 자체적으로 라우팅 라이브러리를 지원해주지 않습니다. 그래서 react-router-dom 이라는 3rd-party 라이브러리가 필요합니다. 이 라이브러리를 터미널(혹은 명령프롬포트)에서 명령어로 다운받겠습니다. 현재 리액트 프로젝트를 작성하고 있는 경로에서 다운받아주셔야 합니다.

$ yarn add react-router-dom

위 명령어를 입력한 후 아래와 같이 설치가 진행됩니다.

설치가 완료되었나요? 그렇다면 우리는 이제 라우트를 지정할 수 있습니다. 컴포넌트에 주소를 부여해 해당 주소로 접속하면 해당 컴포넌트를 보여줄 수 있게 됩니다. 작성방법은 2가지가 있습니다. App.js 내부에 작성해 관리하는 것, 그리고 라우트 컴포넌트를 작성해서 관리하는 것 입니다. 선택 기준은 프로젝트 규모입니다. 우리가 만들고 있는 프로젝트는 기본 CRUD 프로젝트라 규모가 크지 않아 전자를 선택해도 됩니다. 하지만 규모가 커질 경우 라우트를 따로 관리하는게 더 수월하고, 리액트를 리액트답게 사용하기 위해 컴포넌트를 따로 작성하는게 나아 후자로 진행하겠습니다.

저는 위 사진처럼 route폴더를 생성하고 그 안에 RouterComponent.jsx 파일을 생성했습니다. 이제 코드를 작성하겠습니다.

RouterComponent.jsx

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="/users" component={UserListComponent} />

<Route path="/add-user" component={AddUserComponent} />

<Route path="/edit-user" component={EditUserComponent} />

</Switch>

</div>

</BrowserRouter>

</div>

);

}

const style = {

color: 'red',

margin: '10px'

}

export default AppRouter;

다 작성했나요? 위에서 작성한 라우터 컴포넌트는 라우터만 관리해줄거라 함수 하나만 사용했습니다. 그러니 컴포넌트를 함수형으로 작성하는게 효율적이겠죠? 이젠 App.js 파일에 라우터 컴포넌트를 넣어줄겁니다. App.js 파일을 찾아서 다음과 같이 수정해주세요.

App.js

import React from 'react';

import AppRouter from './component/route/RouterComponent';

function App() {

return (

<div>

<AppRouter />

</div>

);

}

export default App;

이제 리액트 앱 내에서 불필요한 파일들을 정리해볼까요? 저는 App.css, index.css, logo.svg를 삭제했습니다. index.css 파일을 삭제했다면, index.js 파일로 들어가 3번째줄에 있는 "import './index.css';" 이 문구를 삭제합니다. 혹시나 하는 마음에 터미널에 다음 명령어를 입력해볼지도 모르겠습니다.

$ yarn start

그럼 안될겁니다. 이유는 이렇습니다. 실행하자마자 'localhost:3000/'으로 이동하는데, 우리는 라우터 컴포넌트에서 기본 url로 이동할 시 UserListComponent를 보여주도록 작성했습니다. 하지만 우리는 리스트 컴포넌트에서 ApiService를 언급했지만 이를 실행할 컴포넌트를 작성하지 않았습니다. (아마 not defined라고 나타날겁니다.) 그래서 우린 다음글에서 ApiService를 작성할겁니다.