반응형
프론트랑 백엔드단에서 데이터를 가져올 때 axios모듈을 많이 사용한다. 그런데 axios를 쓰게 되면, url을 사용해서 데이터를 가져오고 넘겨주고 해야 한다. 만약 url이 같다면 똑같은 코드를 계속적으로 쓰게 된다. axios를 모듈화하여 사용하면 코드를 한결 덜 길게 사용할 수 있다.
axios 기본 코드
import axios from 'axios';
function Other() {
const [data, setData] = useState([]);
useEffect(() => {
useEffect(() => {
axios.get("<http://localhost:8000/api/todo/>").then((res) => setData(res.data));
}, []);
return (
<div style={{height: '300vh'}}>
<ScrollProgress />
<p>{JSON.stringify(data.userId)}</p>
</div>
)
}
export default Other;
axios 모듈화하여 사용하기
1) customAxios 파일 만들기
import axios from "axios";
export const customAxios = axios.create({
baseURL: "<https://jsonplaceholder.typicode.com/posts/1>",
});
반응형
customAxios.js파일 만들어주고 위와 같은 코드를 추가해주었다.
- baseURL : 통신하고자 하는 서버의 url이다.
2) customAxios 사용하기
import React, {useState, useEffect} from 'react';
import ScrollProgress from './ScrollProgress'
import {customAxios} from '../../customAxios'
function Other() {
const [data, setData] = useState([]);
useEffect(() => {
customAxios.get('')
.then((res)=> setData(res.data))
}, []);
return (
<div style={{height: '300vh'}}>
<ScrollProgress />
<p>{JSON.stringify(data.body)}</p>
<p>{JSON.stringify(data.id)}</p>
<p>{JSON.stringify(data.title)}</p>
<p>{JSON.stringify(data.userId)}</p>
</div>
)
}
export default Other
위의 코드에서는 get만 썼지만 post, patch등을 쓸 때 더 활용이 가능하다. 그러면 코드가 더 간결해진다.
실행결과
🔗 참고
반응형
