📖 TIL - fetch가 axios를 거쳐 TanStack Query가 되기까지: 하루 만에 깨달은 것들 ⚡

🤔 axios vs fetch: "axios야... 미안하다"

오늘 드디어 axios와 fetch의 차이를 제대로 알게 됐다. 그동안 사실은 axios에 대해선 어느정도 알고있었고 사용해 본적도 많았지만.. 이걸 왜 사용하는지, fetch와 axios의 차이는 뭔지 비교해본적이 없었던 것 같다. axios와 fetch를 비교해서 보니 '아... 이래서 다들 axios 쓰는구나' 싶더라.

axios는 아래와 같이 기본 설정이 가능하다:

// axios로 이렇게 기본 설정이 된다...!
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

그리고 에러 처리... fetch는 진짜 네트워크 에러만 잡는데, axios는 서버에서 오는 400, 500 에러도 다 잡아준다. 이거 하나만으로도 갈아탈 가치가 있는 것 같다.

api.interceptors.request.use((config) => {
  // 여기서 토큰 넣어주고
  console.log("요청 가로채기 성공!");
  return config;
});

🫷Axios Interceptor

요청 또는 응답을 가로채서 전처리 또는 후처리할 수 있다. 이를 통해 인증 토큰을 자동으로 추가하거나 오류를 일괄 처리할 수 있다.
client와 server 사이의 HTTP요청과 응답을 가로채서 특정 작업을 수행할 수 있게 한다.

서버랑 클라이언트랑 주고받을때 중간 작업을 가로채야할 경우의 역할

• request를 날릴때 server에게 가야되는 header, baseUrl을 매번 설정해야 될 필요가 있을 수도 있다.
• 응답이 왔을때 동일한 처리를 해줘야 될 수도 있다.

인터셉터 지정

import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:4000",
  timeout: 1, // 1ms timeout은 axios 인스턴스가 기다릴수 있는 최대 시간 response reject 발생시키기 위함
});

api.interceptors.request.use((config) => { // api 요청 인터셉트
  // 공통 header를 설정할수도 있고.. 로그를 찍을 수도 있고..
  console.log("인터셉트 요청 성공");
  return config;
});

api.interceptors.response.use( // api 응답 인터셉트
  (res) => {
    console.log("인터셉트 응답 성공");
    return res;
  },
  (err) => {
    console.log("인터셉트 응답 실패");
    return Promise.reject(err); // promise로 넘어오는 객체를 오류처리 할 수 있도록 컴포넌트에 줌
  }
);

export default api;

---

👑 TanStack query에 들어가기 앞서 등장배경을 가볍게 정리하자면..

1. 상태관리 복잡성

• 컴포넌트에서 loading, error, 데이터 관리 등등 직접 관리해야함
• 상태 관리가 복잡하고 로직이 내부에 분산되어 있음

2. 중복된 코드

• 동일한 데이터를 패칭할 경우 반복 작성해야함

3. 비즈니스 로직 분리

• *비즈니스 로직 : 핵심 동작 정의 코드

🔄 이외에 추가적인 Redux 미들웨어의 이해

미들웨어는 액션이 리듀서에 도달하기 전에 중간에 가로채서 추가적인 작업을 수행할 수 있도록 함:

• 비동기 작업 처리
• 로깅
• 에러 핸들링

🚀 Redux Thunk 개념

RTK vs Thunk 비교

RTK 방식

dispatch(someSliceAction())  // slice reducer에서 정의한 액션을 직접 디스패치

Thunk 방식

// createAsyncThunk를 사용한 비동기 액션 생성
const asyncAction = createAsyncThunk(
    "action/type",
    async () => {
        // 비동기 로직
    }
)

⚙️ createAsyncThunk 작동 방식

createAsyncThunk("action type", 비동기함수)는 다음과 같은 상태를 자동으로 처리:

• pending: 로딩 상태
• fulfilled: 성공 상태
• rejected: 에러 상태

extraReducers에서의 처리

extraReducers: (builder) => {
    builder
        .addCase(asyncAction.pending, (state) => {
            state.loading = true;
        })
        .addCase(asyncAction.fulfilled, (state, action) => {
            state.data = action.payload;
        })
        .addCase(asyncAction.rejected, (state, action) => {
            state.error = action.error;
        });
}

🔄 데이터 흐름 비교

RTK 기존 방식

Action 객체 → Reducer → State 업데이트

TanStack Query 방식

1. Dispatch(이벤트 발생)
2. 미들웨어 처리
3. API 비동기 통신(Thunk)
4. Dispatch로 결과 전달
5. Reducer에서 처리
6. State 업데이트
7. UI 렌더링

⚠️ 그래도 한계점

• 복잡한 보일러플레이트 코드
• 액션 생성자와 리듀서의 길이 증가
• 로직 분리의 어려움

그래서!! 생긴게 tanstack query!
react thunk가 useEffect로 가져왔던 데이터들에 비해서는 편리한 도구를 제공하지만 여러가지 이유들때문에react query를 사용한다.

😱 TanStack Query: "어... 이게 뭐야"

근데 이제 진짜 놀라운 건 TanStack Query(옛날 이름: React Query)였다. 처음에는 "또 뭔 라이브러리야..." 했는데, 이거 대박이다.

기존에 useEffect로 하던 방식이 얼마나 귀찮았나면:
1. 로딩 상태 관리
2. 에러 상태 관리
3. 데이터 상태 관리
4. 이거 다 useState로 따로 관리...

🤲 TanStack Query - 동작원리

서버 상태를 위한 라이브러리 (캐싱, 동기화, 무효화)

탄스택 쿼리 주요 기능 3가지 (서버에서 데이터를 가져오고 갱신하는 과정)
1. get (R) - useQuery
2. modify (CUD) - useMutation
3. refresh (데이터 갱신) - invalidateQueries

🚀 TanStack Query - 기본 가이드

📋 초기 설정

QueryClient 설정

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnMount: false,      // 컴포넌트 마운트 시 재요청 방지
      refetchOnWindowFocus: false, // 윈도우 포커스 시 재요청 방지
      refetchOnReconnect: false,   // 재연결 시 재요청 방지
    },
  },
});

Provider 설정

<QueryClientProvider client={client}>
  <App />
</QueryClientProvider>

📥 데이터 조회 (useQuery)

기본 사용법

const { 
  data: todos,      // 조회된 데이터
  isPending,        // 로딩 상태
  isError          // 에러 상태
} = useQuery({ 
  queryKey: ["todos"],  // 쿼리 식별자
  queryFn: fetchTodos   // 데이터 요청 함수
});

로딩 및 에러 처리

if (isPending) {
  return <div>로딩중...</div>;
}

if (isError) {
  return <div>오류가 발생했습니다!</div>;
}

// 데이터 매핑
return (
  <div>
    {todos.map((todo) => (
      <TodoItem key={todo.id} {...todo} />
    ))}
  </div>
);

📝 데이터 변경 (useMutation)

기본 사용법

const { mutate } = useMutation({ 
  mutationFn: addTodo  // 변경 작업을 수행할 함수
});

// 사용 예시
const newTodoObj = { 
  title: todoItem, 
  isDone: false 
};
mutate(newTodoObj);

성공 처리 및 데이터 갱신

const { mutate } = useMutation({ 
  mutationFn: addTodo,
  onSuccess: () => {
    // 데이터 갱신
    queryClient.invalidateQueries(["todos"]);
    
    // 선택적: 성공 메시지 표시
    // alert("데이터가 성공적으로 추가되었습니다!");
  }
});

🔄 주요 옵션 설명

refetchOnMount

• false: 컴포넌트가 마운트될 때 자동으로 데이터를 다시 불러오지 않음
• true: 컴포넌트가 마운트될 때마다 데이터를 다시 불러옴

refetchOnWindowFocus

• false: 윈도우가 포커스를 받을 때 데이터를 다시 불러오지 않음
• true: 사용자가 브라우저 탭으로 돌아올 때 데이터를 다시 불러옴

refetchOnReconnect

• false: 네트워크 재연결 시 데이터를 다시 불러오지 않음
• true: 네트워크 연결이 복구될 때 데이터를 다시 불러옴

💡 Tips

• queryKey는 배열 형태로, 여러 레벨의 키를 가질 수 있습니다
• invalidateQueries를 사용하면 특정 쿼리의 데이터를 무효화하고 새로 불러올 수 있습니다
• 옵션 설정은 전역(QueryClient)과 개별 쿼리 단위로 모두 가능합니다

🤯 오늘의 깨달음

1. axios는 진짜 fetch의 상위호환
2. 인터셉터라는 개념 너무 좋다
3. TanStack Query는... 그냥 미쳤다
4. ......하루에 너무 많고 딥한 공부는 지양하자 (너무힘들어..)

내일은 이거 실제 프로젝트에 적용해보려니 스스로 정리하고 하나씩 써보면서 배워가는 과정이 필요할 것 같다.
하루에 다양하고 많은 내용들을 접하려니 너무 지치는건 사실인지라 제대로 깨우치고 익힌것이 맞나싶지만...
그래도 TanStack Query의 useMutation이랑 invalidateQueries 부분이 너무 기대된다. 보일러 플레이트를 줄일 수 있다니...