[React] axios 를 이용해 API(Spring)와 통신하기

안녕하세요.

이번 포스팅에서는 React의 Ajax 기술인 axios를 이용하여 API와 통신하는 방법을 알아보겠습니다.

---

1. axios 간단 설명

• method : axios 통신 방식 설정
  • POST : 데이터를 보낼 때 주로 사용
  • GET : 데이터를 받아올 때 주로 사용
  • 이 외에 PUT / DELETE 존재(이번 포스팅에서는 다루지 않습니다)
• url : 통신할 URL 설정
• data : axios 통신 시, 함께 보낼 데이터 기입
• params : axios 통신 시, url 뒤의 파라미터 설정
• headers : 데이터 형식 정의
• .then((res)=>{ ... } : 성공 시 작동하는 코드
• .catch(error)=>{ ... } : 실패 시 작동하는 코드

// method : POST(데이터를 보낼 때) or GET(데이터를 받을 때)
// data : 통신 시 보낼 데이터
// params : 주소 파라미터에 추가할 데이터
// .then((res)) ~ : 성공 시
// .catch(error ~ : 실패 시

axios({
    method:"POST",
    url: '/axiosTest',
    data:sendData,
    headers: {'Content-type': 'application/json'}
}).then((res)=>{
    alert(res.data);
}).catch(error=>{
    console.log(error);
});

 

2. POST (API로 데이터를 보낼 때)

1) React 단

function axiosTest(){
        // API로 보낼 데이터를 JSON으로 변환
        var sendData = JSON.stringify({
            "userId": "testID",
            "userPw": "1234"
        });
     
        axios({
            method: "POST",
            url: '/axiosTest',
            data: sendData,
            // header에서 JSON 타입의 데이터라는 것을 명시
            headers: {'Content-type': 'application/json'}
        }).then((res)=>{
            alert("성공");
            // API로 부터 받은 데이터 출력
            console.log(res.data);
        }).catch(error=>{
            console.log("실패");
            console.log(error);
        });
        
    }

 

2) Java 단

@RequestMapping(value = "/axiosTest", produces="text/plain;charset=UTF-8")
public String SignUpFunc (HttpServletRequest request, @RequestBody AxiosDto dto) {
    
    // testID 출력
    System.out.println(dto.getUserId());
        
    // 1234 출력
    System.out.println(dto.getUserPw());
    // 회원가입 같은 기능의 경우 Insert시키는 Service단 호출하면 됩니다.
    
    return "통신 성공";
}

public class AxiosDto {
	private String UserId = "";
	private String UserPw = "";
	
	public String getUserId() {
		return UserId;
	}
	public void setUserId(String userId) {
		UserId = userId;
	}
	public String getUserPw() {
		return UserPw;
	}
	public void setUserPw(String userPw) {
		UserPw = userPw;
	}
}

   

 

3. GET (API에서 데이터를 조회할 때)

1) React 단

axios({
    method:"GET",
    url:"/axiosGetData"
    }).then(function(res){
        // API로 부터 받은 데이터 출력(클라이언트 IP출력)
        console.log(res.data);
    }).catch(error => {
        console.log(error);
});

 

2) Java 단

@RequestMapping("/axiosGetData")
public ResponseEntity<String> getClientIP (HttpServletRequest request) {
    // 요청을 보낸 클라이언트의 IP주소를 반환
    return ResponseEntity.ok(request.getRemoteAddr());
}