[React] axios를 활용한 srping연동(get, post)

안녕하세요 인포돈 입니다.

최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용)

---

 react와 spring을 활용해 프로젝트를 진행하던 도중 서버와 클라이언트의 통신을 보다 간편하게 할 수 있는 방법이 fetch와 axios를 활용하는 방법이 대중적이라고 파악하였습니다. 그래서 저는 이번에 axios에 대해서 이해해보고 직접 간단한 실습을 통해 프로젝트에 적용해보려고 합니다.

 

 언제나 그렇듯이 저는 정말 쉽게 누구나 이해할 수 있도록 axios에 대해서 조사해 보았습니다. 물론 더 딥하게 들어간다면, 완성도 높은 프로젝트가 되겠지만, 누구나 그렇듯 step1부터 차례대로 적용해보며 구현해보도록 하겠습니다.

 

 간단히 axios에 대해서 이해해보고 적용해봅시다.

---

Axios란?

 axios는 기본적으로 브라우저와 node.js를 위해 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

 

 - 브라우저 : 웹 페이지, 이미지, 비디오 등 콘텐츠를 수신, 전송 및 표현하는 소프트웨어를 의미한다. 좀 더 현실적으로 이해하면 크롬, 사파리, 에지, 익스플로러와 같은 것들을 가리킨다.

 

 - node.js : 굉장히 다양한 방면에서 사용되는 기술입니다. 많은 이들에게 알려진 사전적인 정의와 같은 의미는 Chrom V8 JS엔진으로 빌드된 JS런타임이라고 설명합니다. 그러나 우리는 이러한 말보다 보다 쉽게 이해할 수 있어야 합니다. 자바 스크립트 런타임(브라우저와 같이 js가 구동되는 환경) 즉, 브라우저와 비슷한 개념으로 생각하시면 됩니다. (nodejs를 설명하려는 포스팅이 아니니 간단히만 이해하시면 됩니다!)

 

 - Promise API : js 비동기 처리에 사용되는 객체입니다. 더 쉬운 이해로는 서버에서 데이터를 받아온 데이터를 화면에 표시할 때 사용되곤 합니다.

 

 - HTTP 비동기식 통신 : 비동기식 통신이란 점을 기억해야 합니다. 동기식과 비동기식의 가장 큰 차이점은 바로 동시에 처리하냐 하나하나 처리하냐입니다. (물론 우리가 보기에는 모두 동시에 된 듯하지만, 그것은 컴퓨터의 처리속도를 우리가 세세히 볼 수 없기 때문이죠) 여기서 비동기식은 동시에 작동할 수 있다는 것을 가리킵니다. 즉, a의 일을 하면서 b의 일을 동시에 통신할 수 있는 기술이죠.

 

다시 한번 axios를 정의하자면, 브라우저를 위해서 promise객체를 활용해 http 비동기식 통신을 하는 라이브러리이다.라고 정의할 수 있습니다.

---

Axios 기본 메서드

그러면 이제 이 axios를 어떻게 사용해야 될까?라는 의문점이 들 수 있습니다. 기본 메서드에 대해서 알아보고 우리는 그중 GET과 POST에 관한 실습을 진행해봅니다.

• GET : 데이터 조회
• POST : 데이터 등록 및 전송
• PUT : 데이터 수정
• DELETE : 데이터 삭제

이렇게 4가지의 메서드를 가지고 있습니다. 4가지의 기능에 맞게 SPRING과 연동을 하여 작동하면 되게 됩니다.

get

//get 메서드
await axios
    .get("url")
    .then((response) => {
        console.log(response.data);		//정상 통신 후 응답된 메시지 출력
    })
    .catch((error)=>{
        console.log(error);				//오류발생시 실행
})

get은 앞서 말했듯이 데이터를 조회합니다. spring과 연동을 하면 json으로 데이터를 주고받아야 하기 때문에 response도 json형태 입을 기업 해야 합니다.

 

post

//post 메서드
await axios
    .post("url",{
    	name:"info",
        num:"0"
    })
    .then((response) => {
        console.log(response.data);		//정상 통신 후 응답된 메시지 출력
    })
    .catch((error)=>{
        console.log(error);				//오류발생시 실행
})

post의 경우 데이터를 등록하는 메서드이다. 여기서 {name:"info", num:"0"}의 경우 json의 형태로 spring에 값을 넘겨주게 되죠. 이제 spring에서는 해당 값을 db에 넣어주게 되겠죠.

---

Axios를 활용한 react, spring연동

 간단히 user에 관한 정보를 가져오고 넘기는 작업을 할 수 있습니다. 간단한 spring에서 get을 통해서 값을 받아오고 그 값을 수정하여 다시 post로 값을 전달하는 방식입니다.

react

function App() {

    const baseUrl = "http://localhost:8080";

    const [user_username, setUser_username] = useState();
    const [user_password, setUser_password] = useState();

    useEffect(()=>{
        getUser();
    },[]);

    async function getUser(){
        await axios
            .get(baseUrl + "/" + {user_username})
            .then((response) => {
                console.log(response.data);
                setUser_username(response.data.userName);
                setUser_password(response.data.password);
            })
            .catch((error)=>{
                console.log(error);
            })
    }

    const handleChange_username = (e)=>{
        e.preventDefault();
        setUser_username(e.target.value);
    }

    const handleChange_password = (e)=>{
        e.preventDefault();
        setUser_password(e.target.value);
    }

    const handleSubmit = async (e) => {
        e.preventDefault();

        await axios
            .post(baseUrl + "/" + {user_username}, {
                userName:user_username,
                password:user_password,
            })
            .then((response) => {
                console.log(response.data)
            })
            .catch((error) => {
                console.log(error);
            });
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <p>username<input type="text" required={true} value={user_username} onChange={handleChange_username}></input></p>
                <p>password<input type="text" required={true} value={user_password} onChange={handleChange_password}></input></p>
                <button type="submit">수정</button>
            </form>
        </div>
    )
}

spring

    @GetMapping("/{userName}")
    public User Userget(@PathVariable String name){
        User user = userdb.findname(name);
        return user;
    }
    
    @ResponseBody
    @PostMapping("/{userName}")
    public User Userpost(@RequestBody User rq_user) {
    
        User user = new User(rq_user.getUserName(),rq_user.getPassword());

        return user;
    }

---

 

여기서 react와 spring을 연동할 때 각 로컬로 진행한다면 CORS에러를 해결해야 합니다. 해결하는 방법은 react, spring 둘 중에 한 곳에서 해결을 해줄 수 있습니다. (일반적으로는 spring에서 해결을 합니다.) 이에 대한 해결책은 다른 포스팅에서 다뤄보도록 하겠습니다.