📚 React Query, 과연 써야 하는가? 그리고 구조분해할당 친절한 분석

🔍 서론

React Query는 클라이언트 애플리케이션이 서버와 통신할 때 데이터 페칭, 캐싱, 동기화 및 상태 관리를 단순화하기 위해 개발된 라이브러리입니다.

이번 포스팅에서는 **“왜 React Query를 사용하는가?”**라는 질문을 시작으로, 기존 방식과 React Query 방식의 코드를 비교하여 개선된 부분을 설명하겠습니다.

 

아래의 코드는, 패션 아카이브 프로젝트에서의 서버 통신시에 기존에는 React Query를 쓰지 않고 그냥 axios로 처리를 하는 법과, 

React Query를 써서 서버와의 통신을 할때의 차이점을 공부한 내용입니다.

 

모든 코드가 아닌 핵심 코드만 넣겠습니다 ( 보시는 분의 가독성을 위하여,,)

 

1️⃣ 기존 코드 리뷰

 

🔧 기존 코드 (Axios + useEffect 방식)

서버는 JSON 서버를 활용했습니다.

import axios from 'axios';
import { useEffect, useState } from 'react';

const fetchData = () => {
  const [shoes, setShoes] = useState([]);
  const url = `https://codingapple1.github.io/shop/data2.json`;

  useEffect(() => {
    axios
      .get(url)
      .then((response) => setShoes(response.data))
      .catch((error) => console.error('Error fetching data:', error));
  }, []);

  return <ShoeList shoes={shoes} />;
};

 

👎 기존 코드의 문제점

1. 중복 코드 발생: 데이터 fetching 코드가 여러 컴포넌트에 반복될 가능성이 큼.

2. 에러 핸들링 부족: 네트워크 장애나 API 실패 시 재시도를 구현하기 위해 추가 코드가 필요.

3. 캐싱 미지원: 동일한 데이터를 다시 요청할 때, 매번 서버에서 새 데이터를 가져옴.

4. 리패치 및 상태 동기화 문제: 새 데이터가 필요한 시점을 직접 관리해야 함.

 

2️⃣ 개선된 React Query 코드

 

🔧 React Query 사용 코드

 

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import ShoeList from './Components/ShoeList';

const fetchShoes = async () => {
  const response = await axios.get(`https://codingapple1.github.io/shop/data2.json`);
  return response.data; // 서버에서 받아온 데이터 반환
};

const ShoeListWithReactQuery = () => {
  // useQuery 사용하여 데이터를 가져오기
  const queryResult = useQuery(['shoes'], fetchShoes, {
    staleTime: 1000 * 60 * 5, // 5분 동안 데이터가 신선하다고 간주
    cacheTime: 1000 * 60 * 30, // 30분 동안 캐시에 유지
  });

  // 상태에 따라 UI를 다르게 보여주기
  if (queryResult.isLoading) {
    return <p>Loading...</p>; // 로딩 중일 때
  }

  if (queryResult.isError) {
    return <p>Error fetching shoes.</p>; // 에러 발생 시
  }

  const shoes = queryResult.data || []; // 데이터가 없을 경우 빈 배열로 처리

  return (
    <div>
      <button onClick={() => queryResult.refetch()}>새로고침</button>
      <ShoeList shoes={shoes} /> {/* shoes 데이터를 ShoeList 컴포넌트에 전달 */}
    </div>
  );
};

export default ShoeListWithReactQuery;

 

🔍 코드 분석

처음 보면 대부분 저게 뭐지 싶을 겁니다.

 

1. queryResult라는 객체를 사용합니다. 

const queryResult는 useQuery 함수가 반환하는 객체입니다.

 

해당 객체는 크게 4가지 기능이 있습니다.

• queryResult.data → 서버에서 받아온 데이터

• queryResult.isLoading → 로딩 중 여부

• queryResult.isError → 에러 여부

• queryResult.refetch() → 데이터 새로고침

 

위의 3가지 기능은 Boolean 형태를 return 하니 대개 조건부 렌더링을 통하여 로딩 중인지, 서버와의 통신이 실패했는지, 성공했는지를 파악합니다.

 

2. 조건부 렌더링

• 로딩 중일 때 "Loading..." 메시지를 보여줍니다.

• 에러가 발생했을 때 "Error fetching shoes." 메시지를 보여줍니다.

• 정상적인 데이터를 받아왔을 경우 ShoeList 컴포넌트를 렌더링합니다.

 

  //{queryResult.data && '성공임'}
  //{queryResult.isLoading && '로딩중임'}
  //{queryResult.error && '성공아님'} 뭐 이런식으로 써도 괜찮겠네요.

 

 

3️⃣ React Query 사용 시 이점

 

👍 주요 장점

1. 캐싱 및 재사용성: 동일한 쿼리를 중복 요청하지 않고 캐시된 데이터를 반환하여 네트워크 요청을 최소화합니다.

2. 자동 리패치: 기본 설정으로 새 데이터가 필요할 때 자동으로 리패치를 수행합니다.

3. 에러 및 로딩 상태 관리: isLoading, isError 등 상태를 관리하기 위한 로직이 간단해집니다.

4. 자동 재시도: 네트워크 오류 발생 시 일정 횟수까지 자동으로 재시도합니다.

5. 코드 간소화: useQuery 훅 하나로 useState, useEffect, axios 코드를 대체할 수 있습니다.

 

기존 방식 (useEffect + Axios)과의 비교

 

기존 방식으로 데이터를 fetch할 때는 useState와 useEffect를 사용하여 로컬 상태를 관리해야 했습니다. 아래 코드는 신발 데이터를 가져오기 위한 컴포넌트입니다.

 

function App() {
  const [shoes, setShoes] = useState([]);

  useEffect(() => {
    axios
      .get('https://codingapple1.github.io/shop/data1.json')
      .then((response) => setShoes(response.data))
      .catch((error) => console.log(error));
  }, []);

  return <ShoeList shoes={shoes} />;
}

 

• 데이터 로딩 상태와 에러 처리를 위해 추가 코드가 필요합니다.

• 동일한 데이터를 다시 요청할 때 매번 서버 요청이 발생합니다.

• 네트워크 실패 시 추가적으로 재시도 로직을 작성해야 합니다.

 

개선된 React Query 방식

 

React Query를 사용하면 useQuery를 통해 비동기 데이터 fetching을 간단히 처리할 수 있습니다.

 

이번엔 좀 더 편한방식인 구조분해할당을 하여 queryResult 객체를 좀 분리해서 써보겠습니다.

 

const fetchShoes = async () => {
  const { data } = await axios.get('https://codingapple1.github.io/shop/data1.json');
  return data;
};

function App() {
  const { data: shoes = [], isLoading, isError } = useQuery(['shoes'], fetchShoes);

  if (isLoading) return <p>로딩 중...</p>;
  if (isError) return <p>데이터 로드 실패</p>;

  return <ShoeList shoes={shoes} />;
}

 

크게 3가지 장점이 있는데 아래와 같습니다.

 

• isLoading, isError로 로딩 및 에러 상태를 간단하게 관리할 수 있습니다.

• 자동으로 데이터를 리패치합니다.

• 동일한 요청에 대한 캐싱을 지원하므로 네트워크 부담이 줄어듭니다.

 

결론 내리기 전..구조 분해 할당이 무엇인가?

자바스크립트의 아주 중요한 문법입니다. 

한번 짚고 넘어가보겠습니다 !!!

 

const user = {
  name: 'John Doe',
  age: 30,
  job: 'Developer',
};

 

user라는 객체가 있다고 가정합시다.

name,age,job이라는 속성이 들어있고 우린 이 값에 접근하려면 아래와 같이 코드를 짜고는 합니다.

const name = user.name; // 'John Doe'
const age = user.age;   // 30
const job = user.job;   // 'Developer'

 

구조 분해 할당 사용하기 ( 객체의 속성을 밖으로 빼자!) 

말 그대로 객체의 속성명을 {속성명1, 속성명2, 속성명3}  = 객체이름 으로 뻅니다.

그리고 나서 속성명1,2,3을 객체의 접근법인 dot 연산자를 쓰지 않고 바로 속성의 값에 접근을 하는 것입니다.

const { name, age, job } = user;
console.log(name); // 'John Doe'
console.log(age);  // 30
console.log(job);  // 'Developer'

 

기본값 설정하기

어? 근데 위에는 data : shoes = [] 낯선 부분이 나왔습니다!

const fetchShoes = async () => {
  const { data } = await axios.get('https://codingapple1.github.io/shop/data1.json');
  return data;
};

function App() {
  const { data: shoes = [], isLoading, isError } = useQuery(['shoes'], fetchShoes);

  if (isLoading) return <p>로딩 중...</p>;
  if (isError) return <p>데이터 로드 실패</p>;

  return <ShoeList shoes={shoes} />;
}

이 부분은 없는 속성의 값을 구조분해할당 하고 싶을때, 강제로 값을 설정해주는 것이라고 보면 됩니다.

 

쉬운예시

const { name, age, job } = user;
console.log(name); // 'John Doe'
console.log(age);  // 30
console.log(job);  // 'Developer'

const { name, gender = 'unknown' } = user;
console.log(name);   // 'John Doe'
console.log(gender); // 'unknown' (객체에 gender 속성이 없기 때문에 기본값으로 설정된 값이 출력됨)

이제 그럼 gender라는 우리가 강제로 만든 속성의 디폴트 값인 Unknown이 출력됩니다.

 

그럼 gender라는 속성은 user 객체에 추가되었는가?

즉, 구조 분해 할당으로 객체 자체의 변화가 일어나는가?

 

그것은 아닙니다! (다행입니다)

const user = {
  name: 'John Doe',
  age: 30,
  job: 'Developer',
};

const { name, gender = 'unknown' } = user;

console.log(name);   // 'John Doe'
console.log(gender); // 'unknown'
console.log(user);   // { name: 'John Doe', age: 30, job: 'Developer' }

• user 객체는 여전히 { name: 'John Doe', age: 30, job: 'Developer' }입니다.

• gender = 'unknown'은 구조 분해 할당 시 gender라는 변수를 기본값으로 초기화한 것일 뿐 user 객체에 속성이 추가된 건 아닙니다.

 

억지로 속성명(변수명)을 추가해서 값을 얻겠다 정도의 취지이지, 객체 자체의 불변성은 유지됩니다!

 

5. useQuery의 구조 분해 할당 예시

 

그럼  아까 useQuery를 예로 돌아갑시다. 다음과 같은 queryResult 객체가 있다고 가정해 보겠습니다.

서버에서 이런 JSON 형태를 하나 받아왔다고 가정하면

const queryResult = {
  data: [{ id: 1, title: 'Shoe 1' }],
  isLoading: false,
  isError: false,
  refetch: () => console.log('다시 가져오기!'),
};

 

구조 분해 할당으로 queryResult의 값을 꺼내기

맨날 dot 연산자로 접근하면 props보내기도 불편하고 귀찮다! 싶을때 쓰는겁니다.

이제쯤 감이 오실겁니다.

queryResult라는 객체의 속성들을 queryResult.data 가 아닌 data!로만 쓰고 싶은겁니다.

const { data, isLoading, isError } = queryResult;

console.log(data);      // [{ id: 1, title: 'Shoe 1' }]
console.log(isLoading); // false
console.log(isError);   // false

 

변수 이름 바꾸기 & 기본값 설정

 

이제 마지막 이해단계입니다. -> 기본값 설정(강제 변수명 바꾸기)

이런식으로 말입니다!

const { data: shoes = [], isLoading, isError } = queryResult;

console.log(shoes);     // [{ id: 1, title: 'Shoe 1' }]
console.log(isLoading); // false
console.log(isError);   // false

 

shoes는 [ ] ( 빈 배열)로 초기화했는데 왜 콘솔에 찍으면 왜 값이 나오는가?

우린 분명 빈 배열로 값을 강제화 한거 아닌가?

 

매우 좋은 질문이고 필자도 그렇게 생각했습니다. (헷갈릴수 있는 부분입니다)

코드를 다시 살펴봅시다.

const { data: shoes = [], isLoading, isError } = queryResult;

 shoes = []는 기본값으로 설정한 것입니다. 기본값은 queryResult.data가 undefined 또는 null일 때만 적용됩니다. 즉, queryResult.data가 undefined일 때만 빈 배열 []로 할당됩니다.

 

코드 동작 원리

• queryResult.data가 존재하면 shoes에 queryResult.data의 실제 값이 할당됩니다.

• queryResult.data가 undefined일 경우 shoes에 기본값 []가 할당됩니다.

 

쉽게 말하면 변수를 초기화 한것이지 강제로 넌 무조건 빈 값이야가 아니란 것입니다.

 

기본값이 적용되는 경우

const queryResult = {
  data: undefined, // 데이터를 가져오지 못했을 경우
  isLoading: false,
  isError: true,
};

const { data: shoes = [], isLoading, isError } = queryResult;

console.log(shoes);     // [] (기본값으로 빈 배열 할당)
console.log(isLoading); // false
console.log(isError);   // true

위의 경우 queryResult 객체의 data 속성의 값이 undefined입니다.

따라서 data라는 속성을 shoes로 변수명을 강제화하고 해당 값을 [ ] 로 초기화 했을때는

새로 바뀐 shoes 변수명은 undefined를 줄수는 없으니 [ ] 로 할당되겠습니다.

 

정리하면

shoes = []는 기본값 설정입니다.

기본값은 queryResult.data가 undefined일 때만 적용되기 때문에,

queryResult.data에 실제 데이터가 있으면 기본값 대신 해당 데이터가 할당됩니다.

따라서 queryResult.data에 값이 있을 경우 기본값은 무시되는 것이 정상적인 동작입니다.

• 만약 queryResult.data에 실제 데이터가 있으면, shoes에는 해당 데이터가 할당됩니다.

 

기본값 설정은 값이 없을때 (null or undefined)일때를 대비하는 것입니다.

 

마지막 결론

• React Query는 서버 상태를 효율적으로 관리할 수 있게 도와줍니다.

• 데이터 fetching 로직이 컴포넌트 간에 중복되지 않으며, 에러 핸들링 및 로딩 상태 관리가 매우 간단해집니다.

• 캐시를 활용하여 불필요한 네트워크 요청을 줄이고 앱의 성능을 향상시킵니다.

 

따라서 서버 통신이 빈번하거나 많은 비동기 데이터를 관리해야 하는 애플리케이션이라면, React Query는 필수적인 라이브러리라고 할 수 있습니다.