React - axios 사용하여 rest api (Spring) 과 소통하기

리액트를 사용하면 백엔드로 노드를 가장 많이 사용한다.

 

하지만 spring 을 이용하여 소통하는 방법을 알아보자.

 

먼저 axios 라이브러리를 설치해야한다.

 

npm i axios --save

 

axios 는 jquery의 ajax와 비슷한 역할을 해준다.

 

설치를 하였으면 지난 코드에 아래와 같이 작성한다.

 

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 액시오스

function Test1() {
    const [id, setId] = useState(0);
   
    function stateTest() {
        setId(id+1)
    }
     useEffect(
       () => {
          alert("ok")
       
       }, []
       );


    function testAxios(){
        axios(
            {
              url: '/user/checkEmail.do',
              method: 'post',
              data: {
                email:'test@naver.com',aaa:'aaa222'
              } , 
             
              baseURL: 'http://localhost:8110',
              //withCredentials: true,
            }
          ).then(function (response) {
            console.log(response.data)
            console.log(response.data.JavaData[0].NICKNAME)
          });


    }    

    return (
        <div>
        test{id}
        <button  onClick={()=> stateTest()}>test</button>
        <button  onClick={()=> testAxios()}>axiosTest</button>
        </div>
    );
  }


  export default Test1;  

axiosTest 클릭시 testAxios 함수가 실행이 되고, 해당 함수는 axios 요청을 통해서 url에 데이터를 보내고 응답을 요청한다.

위와 같이 보내고 spring에서 컨트롤러를 아래와 같이 작성하였다.

@RequestMapping(value="/checkEmail.do", method=RequestMethod.POST)
	public Map<String, Object> checkEmail(@RequestBody Map<String,Object> paramMap) throws SQLException, Exception {
		System.out.println(paramMap);
		Map <String, Object> resultMap = new HashMap<String, Object>();
		int emailCheck = userservice.checkEmail(paramMap);
		
		if(emailCheck == 0) {
			userservice.emailauth(paramMap);
			resultMap.put("JavaData", "YES");
		}else {
			resultMap.put("JavaData", "NO");
		}
		
		return resultMap;
	}

controller에서 @RequestBody를 통해 paramMap에 데이터를 넣을 수 있다.

 

위와 같이 데이터가 넘어가는 것을 볼 수 있다.

 

위와 같은 방식으로 데이터를 넘기고 받아서 소통하여 restful Api 방식으로 react -spring 을 연동하여 사이트 제작이 가능하다.