[리액트, 스프링부트 연동하여 CRUD 구현] #6 - Axios로 Service 생성 (6/10)

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

#6 Axios로 Service 생성

이번엔 지금껏 미뤄왔던 ApiService를 작성하겠습니다. ApiService는 스프링부트 서버(보통은 'http://localhost:8080/' 으로 열립니다.)와 연결해주는 역할을 합니다. 즉, 리액트에서 무언가 요청을 하면 이를 스프링부트에서 받아 MySQL에서 데이터를 가져오거나 처리합니다. 전형적인 MVC 패턴이라고 할 수 있겠네요. 리액트에서 이를 구현하기 위해선 Axios를 사용합니다. 기존 HTML이나 JSP에서 사용한 AJAX의 역할을 한다고 생각하시면 될 것 같습니다. Axios 또한 리액트에서 공식으로 지원해주지 않습니다. 지난번에 설치한 라우터처럼 3rd-party 라이브러리 형식으로 사용합니다. 이제 아래 명령어로 Axios를 다운받겠습니다.

$ yarn add axios

그럼 다음과 같이 설치가 진행되며 설치가 완료됩니다.

자, 이제 드디어 ApiService를 작성할 시간입니다. 위에서 언급했듯 우리는 Axios를 통해 스프링부트와 연결할 겁니다. 스프링부트와 연결할 기본 URL을 'http://localhost:8080/users' 로 잡겠습니다. 지난 게시글에서 작성한 라우터 컴포넌트 기억나시나요? 그 컴포넌트에서 우리는 기본 path를 '/'로 정하고 '/'로 이동할 시 유저목록을 보여주는 컴포넌트가 나오도록 작성했습니다. 또한 '/users'로 이동했을 때에도 동일한 컴포넌트가 나오도록 작성했습니다. 사실 기본 URL을 '/'로 해도 되는데, '/users'라고 한 이유는 '유저 목록을 보여주는 페이지구나.'라고 생각하기 쉽기 때문입니다. 이제 코드를 작성하겠습니다. src폴더 안에 ApiService.js를 생성합니다.

코드를 작성합니다.

ApiService.js

import axios from 'axios';

const USER_API_BASE_URL = "http://localhost:8080/users";

class ApiService {

fetchUsers(){

return axios.get(USER_API_BASE_URL);

}

fetchUserByID(userID){

return axios.get(USER_API_BASE_URL + '/' + userID);

}

deleteUser(userID){

return axios.delete(USER_API_BASE_URL + '/' + userID);

}

addUser(user){

return axios.post(USER_API_BASE_URL, user);

}

editUser(user){

return axios.put(USER_API_BASE_URL + '/' + user.id, user)

}

}

export default new ApiService();

이제 ApiService 함수를 호출한 컴포넌트로 돌아가서 src폴더에서 생성한 ApiService.js 파일을 import 하겠습니다. 먼저 UserListComponent.jsx 파일입니다. 2번째줄만 추가하면 됩니다.

UserListComponent.jsx

import React, { Component } from 'react';

import ApiService from "../../ApiService";

class UserListComponent extends Component{

constructor(props){

super(props);

this.state = {

users: [],

message: null

}

}

잘 작성하셨나요? ApiService.js 파일을 제대로 불러왔는지 2가지 방법으로 확인해볼 수 있습니다. 먼저는 경로확인입니다. "../" 이렇게 쩜쩜..으로 되어있는 건 현재 디렉토리 위치에서 상위 디렉토리로 이동하는 표현입니다. 현재 UserListComponent.jsx 파일의 위치는 "~/test/src/component/user/UserListComponent.jsx" 입니다. 즉, user 폴더에 위치한거죠. "../"은 상위 디렉토리, 즉  상위 폴더로 이동하는 표현이라 얘기했습니다. 2번째 줄에서는 이를 2번 작성했기에, 현재 user 폴더의 위치에서 상위 디렉토리로 2번 이동합니다. 그렇다면 현재 user 폴더의 위치에서 component 폴더로, component 폴더에서 src 폴더로 이동합니다. 우리는 위에서 ApiService.js를 어떤 디렉토리에 작성했나요? 위치를 잘 잡았다면 "../../"까지 작성하고 <control+space>를 눌러보세요. 다음 사진과 같이 나올겁니다. 그렇다면 경로를 잘 잡은겁니다.

두번째는 ApiService 함수를 호출한 문장에서 확인합니다. UserListComponent.jsx 파일에서는 ApiService()를 2번 호출했습니다. reloadUserList()와 deleteUser()에서 호출했군요. reloadUserList()에서 확인해보겠습니다. 간단합니다. ApiService.js 파일에서 호출한 fetchUsers()를 맥에서는 커맨드키를 누른 상태에서(윈도우에서는 아마 컨트롤키일겁니다.), 클릭을 해보면 됩니다. 굳이 클릭을 하지 않아도 커맨드키나 컨트롤키를 누른 상태에서 마우스를 fetchUsers() 위에 올려두면 아래 사진과 같이 나올겁니다. 그러면 제대로 불러온겁니다. 클릭을 하게 된다면 ApiService.js 파일에서 fetchUsers()가 있는 곳에 커서가 있을겁니다. AddUserComponent.jsx 파일과 EditUserComponent.jsx 파일도 위에서 import 한 것 처럼 똑같이 해주시면 됩니다. 혹여 제대로 불러왔는지 확인하고자 한다면 위와 같은 방법으로 확인하시면 됩니다.

확인하셨나요? 그러면 이제 이 명령어를 입력하고 싶을 겁니다. 자 다같이 외쳐볼까요? 얀 스따~또! (아니 이시국에..?)

$ yarn start

그러면 아래와 같은 화면이 나옵니다.

나름 리액트 프로젝트가 완성된 듯합니다. Add User 버튼을 누르거나, URL 입력창에서 'http://localhost:3000/add-user'로 이동했을 때 우리가 작성한 AddUserComponent.jsx가 잘 보이나요? 현재 기본 페이지에서 목록이 출력되지 않는 이유는 ApiService에서 요청을 했지만, 요청을 받아줄 스프링부트와 스프링부트에서 자료를 처리할 MySQL이 준비되지 않았기 때문이죠. 그리고 뭔가 디자인이 허접하죠? 다음 게시글에서 디자인을 입힐 겁니다. 그러면 리액트에서 작성하는 코딩은 끝난 겁니다. 조금만 더 힘내자구요!