Fetch
JavaScript의 내장 라이브러리로 promise 기반으로 만들어졌다. 📄공식문서
// fetch
const url = 'http://example.com/movies.json'
const options = {
method: 'POST',
mode: 'same-origin',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json';
},
body: JSON.stringify({
name: 'myname',
age: 20
})
}
fetch(url,options)
.then(response => response.json())
.then((data)=> console.log(data));Axios
네트워크 요청을 위해 fetch라는 메서드를 제공하는 인터페이스로, Node.js와 브라우저를 위한 HTTP 통신 라이브러리이다.
비동기로 HTTP 통신을 가능하게 해주며 return을 promise 객체로 해주기때문에 response 데이터를 다루기에도 쉽다. (HTTP 요청과 응답을 JSON 형태로 자동 변경)
GET
axios(url[, config])// Send a GET request (default method)
axios('/user/12345');POST
// Send a POST request
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone',
},
});Fetch vs. Axios
| Fetch | Axios |
|---|---|
| 모던 브라우저에 빌트인이라 설치 필요 없음 | 써드파티 라이브러리로 설치 필요 |
| 별도 보호 없음 | XSRF 보호 |
| body 속성을 사용 | data 속성을 사용 |
| body는 문자열화 되어있다 | data는 object를 포함한다 |
| 응답객체가 ok 속성을 포함하면 성공이다 | status 200이고 statusText가 'OK'이면 성공이다 |
| .json() 메서드를 사용해야 한다 | 자동으로 JSON 데이터 형식으로 변환된다 |
| 해당 기능 X | 요청을 취소할 수 있고 타임아웃을 걸 수 있다 |
| 기본적으로 제공 X | HTTP 요청을 가로챌 수 있음 |
| 지원 X | Download 진행에 대해 기본적인 지원을 한다 |
| Chrome42+, Firefox39+, Edge14+, Safari10.1+ 이상에 지원 | 좀 더 많은 브라우저에 지원됨 |
XSRF(CSRF) : Cross-Site Request Forgery.
쿠키만으로 인증하는 서비스의 취약점을 이용해, 사용자가 모르게 해당 서비스에 특정 명령을 요청하는 공격
✅ 따라서 간단하게 사용할 때는 fetch를 쓰고, 이외의 확장성을 염두해봤을 때는 axios를 쓰면 좋다.
React Query
리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다.
기존의 상태 관리 라이브러리(redux, mobX, Zustand)는 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 그다지 좋지 않다.
store에 전역 클라이언트 상태와 서버 상태(데이터)가 공존하게 된다. 데이터가 서로 상호작용하면서 서버도 클라이언트도 아닌 혼종이 된다.
그래서 서버, 클라이언트 데이터를 분리해주어야 한다.
👉 React-query는 서버의 상태를 관리하기 위한 라이브러리로, 서버와 클라이언트의 비동기적인 동작을 관리하기에 적합하다.
Client State와 Server State는 완전히 다르며 Client는 컴포넌트에서 관리하는 각각의 input 값으로 예를 들 수 있고, Server는 database(DB)에 저장되어있는 데이터로 예를 들 수 있다.
// useQuery (get)
const query = useQuery({ queryKey: ['todos'], queryFn: getTodos });// useMutation (post, update)
const mutation = useMutation({
mutationFn: (newTodo) => {
return axios.post('/todos', newTodo);
},
});const Todos = () => {
const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList, {
refetchOnWindowFocus: false, // react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
retry: 0, // 실패시 재호출 몇번 할지
onSuccess: (data) => {
// 성공시 호출
console.log(data);
},
onError: (e) => {
// 실패시 호출 (401, 404 같은 error가 아니라 정말 api 호출이 실패한 경우만 호출됩니다.)
// 강제로 에러 발생시키려면 api단에서 throw Error 날립니다. (참조: https://react-query.tanstack.com/guides/query-functions#usage-with-fetch-and-other-clients-that-do-not-throw-by-default)
console.log(e.message);
},
});
if (isLoading) {
return <span>Loading...</span>;
}
if (isError) {
return <span>Error: {error.message}</span>;
}
return (
<ul>
{data.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);
};장점
- 캐싱
- GET을 한 데이터에 대해 update를 하면 자동으로 GET을 다시 수행한다.
- 데이터가 오래되었다고 판단되면 다시 GET(invalidateQueries)
- 동일 데이터를 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능)
- 무한 스크롤
- 비동기 과정을 선언적으로 관리할 수 있다.
- React Hook과 사용하는 구조가 비슷하다.
출처
