1월 1-2주차 기록

January 10, 2025 • ☕️ 5 min read

weekly

배워가기

컴포넌트 안에서 Promise 던지기

React Suspense로 감싼 컴포넌트에서 Promise를 던지면?

Copy

import React, { Suspense } from "react";

function fetchData() {
  let data;
  let promise = new Promise((resolve) => {
    setTimeout(() => {
      data = "Hello, Suspense!";
      resolve(data);
    }, 2000);
  });

  // Suspense에서 사용하려면 Promise를 throw
  if (!data) {
    throw promise;
  }

  return data;
}

function AsyncComponent() {
  const data = fetchData();
  return <div>{data}</div>;
}

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  );
}

Suspense의 fallback으로 떨어진다!

Ref https://dev.to/heyitsarpit/suspense-in-react-18-4ca0

react loadable-components

React.lazy와 비교했을 때 SSR, library splitting을 지원하는 것이 특징!

Ref

react-hook-form `isDirty`

사용자가 input 값 중 하나라도 변경하면 true 값이 된다.
useForm에서 모든 input의 defaultValue를 제공해야 hook form이 SoC 원칙에 따라 어떤 form이 dirty한지 체크할 수 있다.

Ref https://react-hook-form.com/docs/useformstate

react-query mutation의 mutationKey의 역할

useQuery의 queryKey는 서버 데이터를 캐싱할 때 쓰인다지만, mutationKey는 쓸 필요가 있나? 🤔

mutationKey의 역할은 다음과 같다.

mutation 전역 설정 - queryClient에 setMutationDefaults를 이용해 key에 대한 기본 mutation을 설정할 수 있다.
useMutationState hook - 필터 조건에 해당하는 MutationCache 정보를 수집할 수 있다.
useIsMutation - 해당하는 mutation이 현재 얼마나 fetching되고 있는지 확인할 수 있다.

Ref

react-query `invalidateQueries`의 `refetchType`

invalidateQueries 메소드에 refetchType: 'none' 옵션을 추가하면, 무효화된 쿼리가 자동으로 다시 실행되지 않는다.

이 설정을 통해 해당 쿼리는 무효화되지만, 즉시 다시 데이터를 가져오지는 않는다. 대신, 다음번에 해당 쿼리가 필요할 때 다시 실행된다.

refetchType에 들어올 수 있는 값은 다음과 같다.

active - refetch 조건과 일치하며 현재 useQuery 등을 통해 **활성 상태(렌더링 중)**인 쿼리만 백그라운드에서 다시 가져옵니다.
inactive - refetch 조건과 일치하며 현재 useQuery 등을 통해 **비활성 상태(렌더링 중이지 않음)**인 쿼리만 백그라운드에서 다시 가져옵니다.
all - refetch 조건과 일치하는 모든 쿼리가 백그라운드에서 다시 가져옵니다.
none - 쿼리를 다시 가져오지 않으며, refetch 조건과 일치하는 쿼리는 무효화만 됩니다.

React ref의 비밀(?)

리액트 트리 깊숙한 곳(?)에 위치한 컴포넌트에서 선언한 ref를 DOM에 직접 붙이는 경우에는 컴포넌트 마운트 (useEffect 에 빈배열 넣어서 테스트) 시에 ref object에 값이 있지만,

리액트 트리 상 하위 컴포넌트가 아닌, Route에서 처음으로 렌더하는 페이지 컴포넌트에서 선언한 ref는 페이지 컴포넌트 마운트 시 undefined가 된다!

그래서 컴포넌트 마운트 시 ref에 대한 조작을 하려면 useCallback을 사용해야 한다…

Copy

const myRef = useCallback<RefCallback<HTMLElement | null>>((node) => {
  if (node) {
    node.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
  }
}, []);