<h1>게으른 초기화 (lazy initialization) 이란?</h1>React에서 게으른 초기화는 상태(state) 초기화 시점에서 초기화 작업이 비용이 많이 들거나 시간이 오래 걸릴 때 유용하게 사용할 수 있는 기술이다.예를 들어 다음과 같은 코드를 보자.<pre spellcheck="false"><code class="language-typescript">const veryHeavyWork = () =&gt; {
 let expensiveValue = 1;

 console.log('very heavy work called');

 // 연산 비용이 아주 비싼 함수
 // ......
 return expensiveValue;
};

export const LazyInitComponent = () =&gt; {
 const [expensiveState, setexpensiveState] = useState(veryHeavyWork());
 const [count, setCount] = useState(0);

 useEffect(() =&gt; {
 console.log('rerender');
 }, [count]);

 return (
 &lt;div&gt;
 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;click me&lt;/button&gt;
 &lt;/div&gt;
 );
};
</code></pre>위의 코드에서 컴포넌트 안의 state(<code spellcheck="false">count</code>)를 변화 시킬 때 마다 리렌더링이 일어난다. 리렌더링이 일어날 때, <code spellcheck="false">expensiveState</code>에 초깃값으로 들어가기 위해 사용된 <code spellcheck="false">veryHeavyWork</code> 함수가 계속해서 호출된다.<img src="https://image.until.blog/love/article/1721747266590" alt="until-917">이런 경우 게으른 초기화를 사용하면, 리렌더링이 되더라도 초깃값으로 설정 되었다면, 값이 비싼 함수를 다시 실행시키지 않을 수 있다.<pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(() =&gt; veryHeavyWork());
</code></pre>방법은 위와 같이 간단하다. 함수를 실행한 결과값을 전달하는 것이 아닌, 함수를 반환하는 함수를 전달하면 된다.<img src="https://image.until.blog/love/article/1721747296968" alt="until-918"><h2>무슨 차이점이지?</h2>자바스크립트의 실행 순서와 리액트가 초깃값이 있는지를 판단하는 순서에 따라 다르다.<pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(veryHeavyWork());
</code></pre>위와 같은 경우는 <code spellcheck="false">useState</code>에 초깃값이 있는지 없는지를 판단하기 전에 <code spellcheck="false">veryHeavyWork</code>라는 함수를 실행시킨다. 함수를 실행 후, 반환 값을 <code spellcheck="false">useState</code>에 넣으려 했지만, 이미 초깃값이 있기 때문에 무시된다.<pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(() =&gt; veryHeavyWork());
</code></pre>그러나 위와 같이 작성한다면, <code spellcheck="false">veryHeavyWork</code>함수를 실행하기 전에 <code spellcheck="false">useState</code>에 함수를 반환하는 함수 그 자체가 전달된다. 따라서 함수라는 초깃값이 이미 할당되어있기에 안의 내용은 무시되고 <code spellcheck="false">veryHeavyWork</code> 함수는 실행되지 않는다.<h2>언제 쓰면 좋을까?</h2>위에서 계속 설명한 것과 같이 초깃값을 생성하는데 연산이 오래 걸릴 경우에 쓰면 좋다. 예를 들어, <code spellcheck="false">localStorage</code>나 <code spellcheck="false">sessionStorage</code>에 접근할 때, 배열에 관한 메서드를 사용할 때 등이다.<h1>useEffect를 이용한 초기화와의 차이</h1><code spellcheck="false">useState</code>의 게으른 초기화와 <code spellcheck="false">useEffect</code>를 통해 컴포넌트가 렌더링 될 때 state를 초기화 하는 것 사이에는 몇 가지 차이가 있다.<h3>초기화 시점</h3><ul><li>게으른 초기화: state 변수 선언 시점에 직접 값을 설정한다. 컴포넌트가 처음 렌더링되기 전에 값이 설정되므로, 컴포넌트가 마운트되고 첫 렌더링이 일어나기 전에 값을 사용할 수 있다.</li><li>useEffect: 컴포넌트가 렌더링 된 이후 초기화</li></ul><h3>용도</h3><ul><li>게으른 초기화: 컴포넌트가 마운트되기 전에 값을 사용해야 하는 경우</li><li>useEffect: 비동기 작업이나 side effect가 발생할 경우</li></ul>

게으른 초기화에 대해 알아보자

React의 게으른 초기화 (lazy initialization)

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1716115237924" alt="until-88">react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.<h2>staleTime</h2><blockquote><ul><li>The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.</li><li>If set to <code spellcheck="false">Infinity</code>, the data will never be considered stale</li></ul></blockquote><code spellcheck="false">staleTime</code>은 불러온 데이터가 fresh한 시간을 나타낸다. defaultValue는 0으로, 리액트 쿼리에서는 기본적으로 불러온 데이터는 fresh하지 않다고 간주한다.기본 값을 사용하게 된다면 해당 hook을 사용하는 컴포넌트가 mount 될 때마다 data fetching을 시도할 것이다.데이터의 stale여부에 따라서 적절하게 조절해줌으로써 최적화 해줄 수 있다.아래 예시는 until.lbog 에서 사용하는 특정 블로그 정보를 가져오는 훅이다.<pre spellcheck="false"><code class="language-typescript">import { useSuspenseQuery } from '@tanstack/react-query'
import { GetBlogResponse, createGetBlog } from 'src/apis/blog/[username]'
import { queryKeys } from 'src/constants/queryKeys'

const useBlogQuery = () =&gt; {
 const username = useUsername();
 const { data } = useSuspenseQuery&lt;GetBlogResponse&gt;({
 queryKey: queryKeys.blog.username.body(username),
 queryFn: createGetBlog(username),
 staleTime: Infinity,
 })
 return data
}

export default useBlogQuery</code></pre>staleTime을 <code spellcheck="false">Infinity</code>로 설정한 이유는 무엇일까?기본적으로 블로그 정보는 서버사이드에서 불러온 이후 변경되는 경우가 거의 없다. 해당 훅은 블로그에서 전반적으로 사용하고 있기 때문에 staleTime이 0일 경우에는 화면을 전환될 때마다 비효율적인 데이터 패칭이 계속해서 일어날 것이라고 판단하였다.프로필 수정, 팔로우, 팔로잉와 같이 데이터가 더이상 fresh하지 않은 경우에는 <code spellcheck="false">queryClient.invalidateQuery</code>를 통해 명시적으로 갱신해줌으로써 해결할 수 있다.물론 위 방식의 경우 외부적인 요인에 의해 특정 블로그 정보가 변경되는 경우에는 해당 블로그에 재 접속하지 않는 이상 갱신되지 않을 수 있다는 점은 감안해야한다.아래 예시는 게시글 리스트를 가져오는 훅이다.<pre spellcheck="false"><code>import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
import { queryKeys } from 'src/constants/queryKeys'
import {
 GetArticlesParams,
 createGetUserArticles,
} from 'src/apis/blog/[username]/articles'
import useBlogData from 'src/blog/hooks/useBlogData'
import useArticleParams from './useArticleParams'

const useArticlesInfiniteQuery = () =&gt; {
 const blogData = useBlogData()
 const { order, query, tag } = useArticleParams()

 const params: GetArticlesParams = {
 order: order || undefined,
 query: query || undefined,
 tagSlug: tag || undefined,
 }

 const { data, ...infiniteQuery } = useSuspenseInfiniteQuery({
 queryKey: queryKeys.blog.username.articles.list(blogData.username, params),
 queryFn: async ({ pageParam }) =&gt; {
 const getUserArticles = createGetUserArticles(blogData.username)

 return await getUserArticles({ page: pageParam, ...params })
 },
 initialPageParam: 0,
 getNextPageParam: (data) =&gt; (data.hasMore ? data.page + 1 : undefined),
 })

 if (!data) throw new Error('Suspense Error')

 return { data, ...infiniteQuery }
}

export default useArticlesInfiniteQuery
</code></pre>위 훅에서는 반대로 <code spellcheck="false">staleTime</code>을 설정하지 않고 기본값(0)을 사용했다.그 이유는 훅의 영향 범위가 <code spellcheck="false">useBlogQuery</code> 와 같이 전반적인 블로그 페이지에서 사용되는 것이 아닌 하나의 특정된 페이지에서만 사용하기에 때문이다<h2>gcTime (cacheTime)</h2><blockquote><ul><li>The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used.</li></ul></blockquote><code spellcheck="false">gcTime</code> 은 데이터가 사용되지 않는 상황에서 memory에 유지될 수 있는 시간을 의미하고, defaultValue는 클라이언트 사이드에서는 5분, 서버사이드에서는 Infinity로 지정된다.일반적으로 클라이언트 사이드에서 해당 값을 변경하는 경우는 크게 없었던 것 같다.데이터 패칭에 직접적인 영향을 주지 않기 때문이다.다만 서버사이드에서는 Infinity로 설정되기 때문에 얘기가 달라진다. 메모리에 계속해서 데이터가 누적되는 경우에는 해당 값을 적절히 지정해 주는 것이 필요할 것 같다.<h2>결론</h2>어떻게 잡아주더라도 http 통신을 하는 웹페이지 안에서 데이터는 불일치하는 경우는 발생할 수 밖에 없다.데이터의 특성에 따라 적절한 캐싱 시간을 조절함으로써 불일치하는 경우를 최소화 할 수 있도록 하는것이 최선인 것 같다.

react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.staleTimeThe time in milliseconds after data is considered stale. This value only applies to the hook it is define