전역 상태 관리를 위한 React Query 도입

✅ React Query를 도입한 이유

---

1. 데이터 캐싱 및 자동 Refetching

React Query는 서버 상태를 캐싱하고, stale(오래된) 상태라고 판단되면 자동으로 데이터를 다시 가져옵니다.
자동 리페칭이 일어나는 대표적인 상황은 다음과 같습니다:

• 브라우저에 다시 포커스가 들어왔을 때
• 컴포넌트가 새로 마운트되었을 때
• 네트워크가 끊어졌다가 다시 연결되었을 때

💡 React Query는 캐싱된 데이터를 항상 stale로 간주하고, 필요시 자동으로 최신 데이터로 동기화합니다.
→ 이를 통해 불필요한 API 호출을 방지하고, 서버 부담을 줄일 수 있습니다.

---

2. Query Key를 통한 데이터 공유

React Query는 Query Key를 기준으로 데이터를 캐싱 및 공유합니다.
동일한 Query Key를 사용하면, 여러 컴포넌트에서 같은 데이터를 공유할 수 있습니다.

// React Query v4 이상에서는 쿼리 키를 배열로 지정해야 합니다
useQuery(['example'], fetchTodos);

---

3. Redux에서 발생하는 Boilerplate 코드 제거

기존 Redux에서는 다음과 같이 많은 코드가 필요합니다:

export interface AccountState {
  isLogined: boolean;
}

const initialState: AccountState = {
  isLogined: false,
};

const AccountSlice = createSlice({
  name: 'account',
  initialState,
  reducers: {
    setLogin(state) {
      state.isLogined = true;
    },
    setLogout() {
      return initialState;
    },
  },
});

const { reducer } = AccountSlice;

export const logout = () => (dispatch) => {
  removeLocalStorageToken();
  dispatch(AccountSlice.actions.setLogout());
  setAuthIntercepter(''); // API 토큰 해제
  window.location.reload(); // 리프레시
};

리덕스 툴킷을 활용해도 여전히 액션 생성자, 슬라이스, 디스패치 등 많은 코드가 필요합니다.
→ 반면 React Query는 서버 상태를 효율적으로 다룰 수 있고, 로직이 간결해진다는 장점이 있습니다.