유데미 취업부트캠프 - 프론트엔드&백엔드 : 9주차 (2/5~2/8) WIL

Next.js

 

React Query

React Query를 통해, useEffect와 data-fetch를 한번에 할 수 있다.

useQuery({ queryKey: ["til", { category: "trending" }] });

//category외에 page, sort같은것도 같이 넣는다고 한다.

❗️ react query는 서버와 동기화 하기 때문에, 가끔식 local쪽 data를 날리고 새로 받아오는 작업을 한다고 한다.  (invalidate)

 

👉🏻 key를 구분해, 전체 바구니를 초기화하는 것이 아니라 til만 초기화 한다.

 

✓queryKey: 분석하고 정리한다.

✓queryFn: fetch와 같은 함수를 정의하고, fetch되면 queryKey에 따라 데이터로 정리되어 들어간다.

 

✨ Next.js에서 React Query를 사용한다면, 데이터를 가져오기 위해 클라이언트 라이브러리가 필요하다. 

 

 

 

useMutation

서버에 데이터를 변경하기 위해 사용되는데, 데이터의 생성(Create), 수정(Update), 삭제(Delete)할 때 주로 사용된다.

 

✓ 데이터 변화가 이루어질때 다시 서버로부터 GET요청을 통해 최신 데이터를 유지할 수 있다.

✓ useQuery와 사용법이 거의 동일하다.

 

import { useMutation } from "react-query";

const { data, isLoading, mutate } = useMutation(fetch, options);

 

 

🤔 useQuery로 가져온 데이터가 변동되어서 리렌더링되어야 한다면 어떻게 해야할까?

 

useState 또는 useRef와 함께 사용하기: useQuery 훅에서 가져온 데이터를 useState 또는 useRef를 사용하여 컴포넌트의 상태로 관리합니다. 데이터가 업데이트되면 상태가 업데이트되고 컴포넌트가 리렌더링됩니다.

import { useQuery } from '@apollo/client';
import { useState } from 'react';

function MyComponent() {
  const { loading, data } = useQuery(MY_QUERY);
  const [myData, setMyData] = useState(null);

  useEffect(() => {
    if (!loading && data) {
      setMyData(data);
    }
  }, [loading, data]);

  if (loading) return <p>Loading...</p>;
  if (!myData) return null;

  return (
    <div>
      {/* Display myData */}
    </div>
  );
}

 

useEffect를 사용하여 수동으로 업데이트 감지하기: useQuery로 가져온 데이터가 변경될 때마다 useEffect를 사용하여 필요한 작업을 수행합니다.

import { useQuery } from '@apollo/client';
import { useState, useEffect } from 'react';

function MyComponent() {
  const { loading, data } = useQuery(MY_QUERY);
  const [myData, setMyData] = useState(null);

  useEffect(() => {
    if (!loading && data) {
      setMyData(data);
    }
  }, [loading, data]);

  useEffect(() => {
    // 데이터가 변경될 때 필요한 작업 수행
  }, [myData]);

  if (loading) return <p>Loading...</p>;
  if (!myData) return null;

  return (
    <div>
      {/* Display myData */}
    </div>
  );
}

 

Apollo Client의 refetch 기능 사용하기: useQuery 훅에서 refetch 함수를 사용하여 데이터를 다시 가져옵니다. 이 방법은 데이터를 직접 쿼리하여 업데이트하는 것이므로 주로 사용자 액션에 반응하여 데이터를 업데이트할 때 사용됩니다.

import { useQuery } from '@apollo/client';

function MyComponent() {
  const { loading, data, refetch } = useQuery(MY_QUERY);

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      {/* Display data */}

      <button onClick={() => refetch()}>Refresh Data</button>
    </div>
  );
}

 

 

 

context API , Reudx, useQuery 비교

✓ Context API: Context API는 React에서 제공하는 기능으로, 컴포넌트 트리 전체에서 데이터를 전달할 수 있습니다. 작은 규모의 애플리케이션이나 간단한 상태 관리에 유용합니다. 별도의 라이브러리를 추가로 설치할 필요가 없어서 프로젝트의 의존성을 줄일 수 있습니다. 그러나 상태의 복잡도가 증가하면 관리하기 어려워질 수 있습니다.

 

✓ Redux: Redux는 가장 인기 있는 상태 관리 라이브러리 중 하나입니다. 상태의 중앙 집중화를 통해 상태 변화를 예측 가능하게 만들어줍니다. 대규모 애플리케이션에서 상태를 효율적으로 관리할 수 있습니다. 하지만 Redux를 사용하기 위해서는 별도의 학습이 필요하고, 추가적인 코드량이 늘어날 수 있습니다.

 

✓ useQuery (Apollo Client): useQuery는 Apollo Client에서 제공하는 React 훅으로, GraphQL 쿼리를 수행하고 데이터를 가져옵니다. 만약 애플리케이션의 주요 데이터가 GraphQL을 통해 관리된다면, Apollo Client를 사용하여 상태를 관리하는 것이 적절할 수 있습니다. 하지만 useQuery는 주로 데이터 가져오기에 사용되기 때문에 상태의 변경 및 업데이트에는 조금 더 작업이 필요할 수 있습니다.