🦔 React-Query 적용하기

✒️ Server State

✏️ state (상태)

• React에서는 렌더링에 영향을 미치는 자바스크립트 Object 라고 정의.
• Global State (전역 상태) 는 어플리케이션 어디에서든 접근이 가능함.
• 또한 전역 상태의 변화는 곧 애플리케이션의 렌더링에 전반적으로 영향을 미침.

✏️ Client State

• UI 테마, 사이드바, 폼 입력 등과 같이 클라이언트가 소유하고 제어하는 데이터를 의미.
• 클라이언트에서 항상 제어가 가능하기에 항상 동기적인 상태를 가짐.
• local client state : 폼 입력, 사이드바 같이 하나 또는 인접한 컴포넌트에서 사용하는 state.
• global client state : 언어, UI 테마 (다크 모드) 와 같이 어플리케이션에 전반적으로 사용되는 state.

✏️ Server State

• 유저 DB 정보 등과 같이 클라이언트가 서버로부터 받아오는 모든 데이터 를 의미함.
• 클라이언트가 제어하고 관리할 수 없기에 특정 시점으로부터 받아온 데이터를 사용함. 이로 인해 비동기적인 상태를 가짐.
• 서버와 클라이언트 간의 state가 항상 일치한다는 보장이 없으며, 클라이언트에서 더 이상 유효하지 않은 데이터를 소유할 가능성이 있음.

🪶 React-Query란?

react-query는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리이다.

카카오페이 프론트엔드 개발자들이 react query를 사용한 이유

🙌 「if(kakao)2021 - 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유」 세줄요약 🤟
1. React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다.
2. 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있습니다.
3. 더 나아가 React Query에서 제공하는 캐싱, Window Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 “핵심 로직”에 집중할 수 있습니다.

✏️ 이걸 왜 써야 하는가?

1. React 에서는 데이터를 fetching 하거나 update 하는 방법을 제공하지 않는다.

• 따라서 개발자들은 각자의 방식대로 서버로부터 데이터를 fetching 하는 방식을 설계하였다.
• 보통은 Custom Hook을 활용하여 state에 값을 전달하거나, Redux 같은 전역 상태 관리 라이브러리로 인계받은 데이터를 저장한다.

2. Client state와 Server state의 완전한 분리 를 위함이다.

• 일반적으로 서버에서 받아온 server state의 경우 전역으로 관리하는 것이 합리적이다. 왜냐하면 state를 필요로 하는 컴포넌트에서 개별적으로 API 호출을 하는 것은 큰 비용 낭비이기 때문이다.
• 하지만 여러 컴포넌트에서 state를 공유하려 props drilling 을 사용하는 것도 한계가 있기에, 전역 상태 관리 라이브러에서 인계받은 server state를 마치 cache 처럼 관리한다면 훨씬 접근이 용이해진다.
• 그러나 Redux 같은 라이브러리를 사용할 경우 서버에서 데이터를 받아와 상태 관리를 하기 위해 별도의 작업 (Redux-Saga) 이 필요하고, 이로 인해 관련 로직 및 모듈이 비대해진다.
• react-query의 경우 Server State와 관련된 작업을 완벽히 구분지어 제공하기에, Client State 까지 담당하는 전역 상태 관리 라이브러리로부터 이를 분리해준다.

3. Server State 는 항상 최신의 상태임을 보장하지 않기 때문이다.

• 전역 상태 관리 라이브러리의 경우, 서버의 데이터와 다른 값을 보유할 수도 있다. 그에 대한 이유는 앞서 말한 server state의 비동기적인 특성 때문이다.
• 서버에서 받아온 데이터는 데이터를 로드한 시간의 "스냅샷" 에 불과하다. 따라서 명시적으로 fetching을 해줘야 최신의 데이터로 전환되는데, 이러한 작업을 여러번 수행하기에는 비용이 크다.
• react-query의 경우 state의 상태를 fresh, stale, inactive로 구분지으며 유효하지 않은 상태라면 백그라운드 단위에서 데이터를 refetching 하는 기능을 제공한다.

4. react-query를 통해 Server state를 훨씬 쉽게 관리할 수 있다.

• react query의 경우 아래의 기능을 지원하는 라이브러리이며, 로직 또한 단순한 축에 속한다.
• 현재 데이터가 fetching 되었는지, 아니면 중간에 에러가 발생했는지를 쉽게 체크할 수 있다.

1. 서버로부터 받은 데이터를 캐싱
2. 동일한 데이터에 대한 여러 요청을 단일 요청으로 변환
3. 백그라운드 단에서 오래된 데이터를 자동으로 업데이트
4. 데이터가 현재 오래된 (stale) 상태로 변했는지를 확인.
5. 서버로부터 받은 데이터를 관리하고, GC에 의해 소거되는 과정도 관찰.

✒️ What is Query?

✏️ React Query 에서 쿼리는 무엇을 의미하는가?

• Query는 Server state를 요청하는 함수 (QueryFn) 과 함께 고유한 키 (QueryKey) 로 매핑된다.
• 서버로부터 데이터를 가져올 경우에는 useQuery, useInfiniteQuery Hook을 쓴다.
• 단, 서버의 데이터를 수정할 경우에는 useMutation Hook을 사용해야 한다.

✏️ queryKey와 queryFn에 대하여.

• queryKey 는 refetch, caching 등과 같은 작업을 할때 쓰이는 고유한 키다. v4 부터는 배열로만 key를 선언해야 한다.
• queryFn 의 경우 서버로부터 데이터를 가져오기 위해 쓰이는 비동기 함수를 의미하며 반드시 Promise를 리턴해야 한다.

내 코드에서 보는 리액트쿼리 적용

const postQuery = useQuery({
  queryKey: ['postData', postId],
  queryFn: fetchPostData,
  enabled: !!postId, // postId가 있을 때만 쿼리를 실행합니다.
});

• queryKey: 쿼리를 식별하는 고유 키입니다. 배열 형식으로 설정합니다.
• queryFn: 데이터를 가져오는 함수입니다.
• enabled: 특정 조건에서만 쿼리를 실행하도록 합니다.

좋아요/좋아요 취소 구현

좋아요 기능을 구현하기 위해 useMutation 훅을 사
이는 데이터를 변경하는 작업을 처리

likeMutation과 dislikeMutation
좋아요 추가 및 취소를 처리하는 뮤테이션 함수입니다.
성공 시 관련된 쿼리를 무효화하여 최신 데이터를 가져옵니다.

const likeMutation = useMutation({
  mutationFn: async () => {
    const response = await axios.post(
      `${IP_ADDRESS}/board/like`,
      { email: myEmail, postId: postId },
      {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          Accept: 'application/json',
          'Authorization-Access': accessToken,
        },
      }
    );
    return response.data;
  },
  onSuccess: () => {
    queryClient.invalidateQueries(['postData', postId]);
    queryClient.invalidateQueries(['likedPosts']);
  },
  onError: handleError,
});

const dislikeMutation = useMutation({
  mutationFn: async () => {
    const response = await axios.post(
      `${IP_ADDRESS}/board/dislike`,
      { email: myEmail, postId: postId },
      {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          Accept: 'application/json',
          'Authorization-Access': accessToken,
        },
      }
    );
    return response.data;
  },
  onSuccess: () => {
    queryClient.invalidateQueries(['postData', postId]);
    queryClient.invalidateQueries(['likedPosts']);
  },
  onError: handleError,
});

onSuccess 옵션은 뮤테이션이 성공적으로 완료되었을 때 실행된다.
여기서는 queryClient.invalidateQueries를 사용하여 특정 쿼리를 무효화(invalidate)

• 무효화된 쿼리는 다음 번에 컴포넌트가 렌더링될 때나 쿼리가 활성화될 때 자동으로 다시 페칭됩니다.

onSuccess: () => {
  queryClient.invalidateQueries(['postData', postId]);
  queryClient.invalidateQueries(['likedPosts']);
}

queryClient.invalidateQueries
이 함수는 지정된 쿼리 키를 가진 쿼리를 무효화합니다. 무효화된 쿼리는 캐시된 데이터를 사용하지 않고, 다시 페칭을 시도합니다.

queryClient.invalidateQueries(['postData', postId])

• ['postData', postId] 쿼리 키를 가진 쿼리를 무효화합니다.
• 이 경우, 게시글의 상세 데이터를 나타냅니다. 게시글에 좋아요를 추가하거나 취소하면, 게시글의 상세 정보도 갱신되어야 하기 때문에 이 쿼리를 무효화합니다.

queryClient.invalidateQueries(['likedPosts'])

• ['likedPosts'] 쿼리 키를 가진 쿼리를 무효화합니다.
• 사용자가 좋아요를 누른 게시글 목록을 나타냅니다. 좋아요 상태가 변경되면, 이 목록도 갱신되어야 하기 때문에 이 쿼리를 무효화합니다.

무효화의 효과

무효화된 쿼리는 다음 번 컴포넌트가 마운트되거나 쿼리가 활성화될 때 자동으로 다시 페칭됩니다. 이렇게 하면 최신 데이터가 반영되어 사용자에게 보여집니다.

예를 들어, 사용자가 게시글에 좋아요를 눌렀을 때:

1. postData 쿼리를 무효화하면, 게시글의 상세 데이터가 다시 페칭되어 갱신된 좋아요 수를 반영합니다.

2.likedPosts 쿼리를 무효화하면, 사용자가 좋아요를 누른 게시글 목록이 다시 페칭되어 갱신된 목록을 반영합니다.

mutate

mutate는 리액트 쿼리의 useMutation 훅에서 제공하는 함수
정의된 뮤테이션(데이터 변경) 작업을 트리거(실행)합니다. mutate 함수는 비동기 작업을 수행하고, 성공하거나 실패할 때 특정 콜백 함수를 실행합니다.

toggleLike 함수에서의 mutate 사용

• toggleLike 함수는 좋아요 상태를 토글하는 기능을 합니다. 이 함수는 Liked 상태에 따라 좋아요를 추가하거나 취소하는 뮤테이션을 실행합니다.

1. Liked가 true인 경우, 즉 사용자가 이미 좋아요를 누른 상태라면, dislikeMutation.mutate()를 호출하여 좋아요를 취소합니다.
2. Liked가 false인 경우, 즉 사용자가 아직 좋아요를 누르지 않은 상태라면, likeMutation.mutate()를 호출하여 좋아요를 추가합니다.

const toggleLike = () => {
  if (Liked) {
    dislikeMutation.mutate(); // 좋아요 취소 뮤테이션 실행
  } else {
    likeMutation.mutate(); // 좋아요 추가 뮤테이션 실행
  }
};

useMutation의 반환 값

• mutate: 뮤테이션을 트리거하는 함수입니다.
• mutateAsync: 뮤테이션을 비동기 방식으로 트리거하는 함수로, Promise를 반환합니다.
• isLoading: 뮤테이션이 실행 중인지를 나타내는 부울 값입니다.
• isError: 뮤테이션이 실패했는지를 나타내는 부울 값입니다.
• isSuccess: 뮤테이션이 성공했는지를 나타내는 부울 값입니다.
• error: 뮤테이션이 실패했을 때 발생한 에러 객체입니다.
• data: 뮤테이션이 성공했을 때 반환된 데이터입니다.

(아직... 더 내용 추가해야함..