[React] Axios / React API 통신 (리액트 api 통신)

 

 

react hooks - axios

 

axios 모듈화

axios는 통신으로 한 곳에서만 쓰이는 것이 아니기 때문에, 유지보수 및 가독성을 위해 모듈화가 필요합니다.

이전 글에서 작성한 프로젝트 디렉토리 구성에 따라,

'utils' 디렉토리에 api.js 라는 react.js 를 생성해서 여러 페이지에서 활용하였습니다.

 

api.js 선언

import axios from 'axios';

const API =axios.create({
    //baseURL: `http://localhost:8080/common`,
    timeout: 30000,
    headers: {
        "Content-Type" : `application/json;charset=UTF-8`,
        "Access-Control-Allow-Origin": "*",
        "Accept": "application/json",
    }
});
export default API;

 

프로젝트 내 사용방법

//api 선언
import API from 'utils/api';

//onClick 에서 사용방법

<form action="#" name="loginFrm" method="post" onSubmit={handleSubmit}>
	<button type="submit">로그인</button>
</form>

    const handleSubmit= (e)=>{
        e.preventDefault();
        async function callAPI(){
            const res = await API.post("/login", params)
            console.log(res.data)
        }
        callAPI();
    };
    
//페이지 호출 시 사용방법 useEffect
    useEffect(() => {        
        async function callAPI(){
            const res = await API.post("/list", params)
            console.log(res.data)            
        }
        callAPI();
    }, []);