[Front] React 소스 구현(4) - ApiService

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

전체 소스

import axios from 'axios';

const API_BASE_URL = "http://localhost:8081/kwonnee/users";

class ApiService {
	
	getAllUsers(){
		return axios.get(API_BASE_URL+"/list");
	}
	
	getUserByID(userID){
		return axios.get(API_BASE_URL+"/list/"+userID);
	}
	
	deleteUserByID(userID){
		return axios.delete(API_BASE_URL+"/delete/"+userID);
	}
	
	addUser(user){
		return axios.post(API_BASE_URL+"/add/",user);
	}
	
	editUser(user){
		return axios.post(API_BASE_URL+"/edit/",user);
	}
}

export default new ApiService;

roll

Front와 Back 사이 API 호출을 처리하기 위한 컴포넌트

소스 분석

소스 분석에 앞서 axios의 개념에 대해 이해가 선행되어야 한다.
axios에 대해 들어보지 못했다면 이곳을 통해 가볍게 보고 오도록 하자.

1. getAllUsers

getAllUsers(){
	return axios.get(API_BASE_URL+"/list");
}

• 목적: 모든 user목록 조회
• HTTP Method type: GET
• return: 전체 user 목록

2. getUserByID(userID)

getUserByID(userID){
return axios.get(API_BASE_URL+"/list/"+userID);
}

• 목적: 특정 user 조회
• HTTP Method type: GET
• return: 해당 user 데이터

3. deleteUserByID(userID)

deleteUserByID(userID){
return axios.delete(API_BASE_URL+"/delete/"+userID);
}

• 목적: 특정 user 삭제
• HTTP Method type: GET
• return: null

위 함수는 특정 user의 데이터를 삭제하는 함수이다.
DELETE Request method를 통해 호출했고 Back단에서 삭제 처리 결과를 반환하는 중개 역할을 한다.

4. addUser(user)

addUser(user){
return axios.post(API_BASE_URL+"/add/",user);
}

• 목적: 신규 user 추가
• HTTP Method type: POST
• return: null

4. editUser(user)

editUser(user){
return axios.post(API_BASE_URL+"/edit/",user);
}

• 목적: 특정 user 정보 수정
• HTTP Method type: POST
• return: null