[React] axios로 백엔드 연동하기

1. fetch VS axios

백엔드와 통신을 하기 위해선 비동기 HTTP 통신을 하게 된다. fetch 또는 axios의 활용이 필요하다. 각자 선호하는 방식에 따라 선택을 하면 되는데, 필자는 axios를 선택하게 되었다. fetch와 axios의 비교를 통해, 자신에게 적합한 라이브러리를 확인하여 선택하면 될 것이다.

 

(1) fetch

fetch는 Promise(JavaScript 비동기 처리의 성공 유무를 나타내는 객체) 기반 JavaScript 내장 라이브러리로, 추가적인 설치 과정 없이 바로 활용이 가능하다. 다만, 네트워크 에러가 발생하는 경우 response timeout이 없어 기다려야 하며, 전달받은 데이터를 JSON으로 변환해주는 과정이 필요하다.

 

(2) axios

axios는 Promise API를 활용한 HTTP 통신 라이브러리로, 터미널에서 axios의 설치가 요구된다. 전달받은 데이터를 자동으로 JSON으로 변환해주어 추가적인 변환 과정이 요구되지 않는다. 

(2-1) axios 설치

yarn add axios

 

(3) fetch VS axios

간단한 정보를 주고 받아 확인하는 프로젝트를 진행하는 이들에게 fetch를 추천한다. 별도의 설치 과정 없이 간단히 사용하기에 용이하기 때문이다. 

프로젝트의 규모가 작지 않으며 서버로부터의 변화에 민감하게 대처해야 하는 프로젝트를 진행하는 이들에겐 axios를 추천한다. fetch보다 많은 기능이 존재하다는 것이 그 이유이다. 

자신이 진행하는 프로젝트에 적합한 라이브러리를 선택해 적용하길 바란다. 물론 규모가 커도 fetch를 선택하여 진행해도 큰 무리는 존재하지 않음에 유의하라!

 

2. 함수 부분

함수의 내부에 axios로 진행하는 통신을 작성해 다양한 상황에 사용할 수 있도록 구현했다.

필자가 이용한 API의 형태는 다음과 같았다.

| request body
{ Style sytle, Sex sex LocalDateTime time }

| response body
{ Long outfitId, String outfitUrl, weatherList }

 

(1) 구조

1. axios로부터 가져오는 부분
2. 불러왔을 때 데이터를 처리하는 부분
3. 에러가 발생했을 때 처리하는 부분

 

(2) axios로부터 가져오는 부분

 axios.get(`http://서버주소:8080/api/outfit?style=${style}&sex=${sex}&time=${date}`)

방식에 따라 get, post을 다르게 작성하면 된다. 이때, post의 경우엔 전달할 데이터도 포함해야 한다.

 

(3) 불러왔을 때 데이터를 처리하는 부분

response.data까지 이동하면 자신이 이용할 데이터에 접근이 가능하다. outfitUrl이 필요하다면, response.data.outfitUrl의 형식으로 접근하면 된다.  

.then((response)=>{ //실제 구동
            setData(response.data);
            setClothUrl(response.data.outfitUrl);
            setTime(Object.keys(response.data.weather.body));
})

 

(4) 에러가 발생했을 때 처리하는 부분

error로 자신의 상황에 일치하는 error 메시지를 출력해주게 된다.

.catch((error)=>{ //error처리
            console.log(error)
})

 

(5) 실제 코드

/*axios url part*/
const [sex,setSex]=useState("MAN");
const [style,setStyle]=useState("DANDY");
const [date,setDate]=useState("2023-11-18T10:07:00");

/*data part*/
const [data,setData]=useState(null);
const [clothUrl,setClothUrl]=useState();
const [time,setTime]=useState([]);

const fetchData=()=>{
        axios.get(`http://서버주소:8080/api/outfit?style=${style}&sex=${sex}&time=${date}`)
        .then((response)=>{ //실제 구동
            setData(response.data);
            setClothUrl(response.data.outfitUrl);
            setTime(Object.keys(response.data.weather.body));
        })
        .catch((error)=>{ //error처리
            console.log(error)
        })
    }

 

3. 사용 부분

(1) 컴포넌트를 실행시 사용

useEffect이라는 훅을 이용해 해당 컴포넌트가 처음으로 렌더링되는 순간에 서버로부터 데이터를 가져와 설정해주고자 한다. 이를 위해 fetchData()라는 함수에 axios를 따로 분리하여 구현해준 것이다. 만일, 자신이 서버로부터 정보를 가져오는 과정이 컴포넌트를 처음 실행하는 순간에만 요구된다면 useEffect안에 바로 axios를 활용한 데이터 가져오기를 진행하면 된다.

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

 

(2) 컴포넌트 내용 업데이트시 사용

특정한 이벤트가 발생했을 때, handleButtonSex()가 작동되게 되고 정보가 바뀌게 되면 fetchData()를 진행하게 된다. 즉, 변경된 내용에 대해 서버로부터 새로운 정보를 받아올 수 있게 되는 것이다.

const handleButtonSex=()=>{
        var input="";
        input=prompt("남성 또는 여성을 입력해주세요.");
        if(input==="남성"){setSex("MAN");}
        else if(input==="여성"){setSex("WOMAN");}
        fetchData();
    }

 

4. axios를 활용한 프로젝트

GitHub - Nanali-cody/frontend