리액트에서 반복적인 useEffect 대신 SWR 사용하기

리액트에서 데이터를 가져오는 로직에 가장 많이 사용되는 방법은 'useEffect'입니다. 하지만 프로젝트가 커질수록 중복 API 호출로 인한 문제점이 발생합니다. 이러한 문제를 해결하기 위해 SWR 라이브러리를 사용할 수 있습니다. SWR은 자동 캐싱과 백그라운드 갱신 기능을 통해 더 간결하고 효율적인 데이터 페칭을 가능하게 합니다.

이 글에서는 useEffect 방식의 한계를 살펴보고, SWR이 이를 어떻게 보완할 수 있는지 알아보겠습니다.

useEffect의 문제점

import { useEffect, useState } from "react";function ComponentA() {  const [data, setData] = useState(null);  useEffect(() => {    fetch("/api/data").then((res) => res.json()).then((result) => setData(result));  }, []);  return 
Component A Data: {JSON.stringify(data)}
;}function ComponentB() {  const [data, setData] = useState(null);  useEffect(() => {    fetch("/api/data").then((res) => res.json()).then((result) => setData(result));  }, []);  return 
Component B Data: {JSON.stringify(data)}
;}export { ComponentA, ComponentB };

useEffect는 유용하지만 여러 컴포넌트에서 동일한 데이터 요청 시 성능 문제를 발생시킵니다. 문제점으로는:

1. 코드 복잡성 증가

로딩 상태와 에러 처리를 포함하려면 코드가 복잡해지고, 복수의 API 호출이 발생하면 가독성이 저하됩니다.

2. 중복 호출 발생

여러 컴포넌트가 동일한 데이터를 요청하면 중복 호출이 일어나 서버에 부담을 줍니다.

3. 자동 갱신 기능 부족

useEffect는 의존성 배열이나 컴포넌트 마운트 시에만 실행되므로 자동 갱신을 위해 추가 로직이 필요합니다.

SWR 선택 이유

중복 호출을 방지하고 데이터 일관성을 유지할 수 있는 방법으로 SWR을 선택했습니다. SWR은 API 요청을 자동 관리하며, 캐싱과 중복 요청 방지 기능을 제공합니다.

SWR의 동작 원리: Stale-While-Revalidate 전략 

SWR은 캐시와 백그라운드 갱신을 활용하여 사용자가 빠른 응답성과 최신 데이터를 동시에 얻도록 합니다.

자동 캐싱

useSWR로 요청 시 SWR은 데이터를 캐싱합니다. 동일한 요청 시 캐시된 결과를 즉시 반환합니다.

백그라운드 데이터 동기화

캐시된 데이터가 화면에 먼저 표시되며, 백그라운드에서 최신 데이터를 가져와 자동으로 업데이트됩니다.

데이터 재검증 및 갱신

탭 포커스나 네트워크 연결 복원 시 자동으로 데이터를 재검증하는 기능이 있습니다.

SWR 적용 사례: 불필요한 API 요청 문제 해결

사용자 행동에 따라 데이터가 업데이트되는 경우, useEffect 방식으로 매번 API를 호출하면 불필요한 요청이 발생할 수 있습니다.

SWR 적용: 데이터 캐싱과 갱신

function App() {  const [pageIndex, setPageIndex] = useState(0);  const { data } = useSWR(`/api/canvasList?page=${pageIndex}`, fetcher);  // ... 로딩 및 에러 상태 처리  return 
    {data.map(item => 
{item.name}
)}     setPageIndex(pageIndex - 1)}>Previous     setPageIndex(pageIndex + 1)}>Next  
}

• 자동 캐싱: 캐시된 데이터로 즉시 렌더링하여 로딩 시간을 최소화합니다.
• 최신 데이터 동기화: 탭 전환이나 네트워크 재연결 시 자동 재검증합니다.
• 불필요한 트래픽 절약: 자주 변경되지 않는 데이터에 대한 API 호출을 줄입니다.

SWR로 효율적인 데이터 페칭 구현

useEffect에 의존하는 데이터 페칭 방식은 프로젝트 규모가 커지면 성능과 가독성 문제를 초래할 수 있습니다. 이런 경우 SWR을 활용하는 것이 효과적입니다. SWR은 이러한 문제를 해결해 줄 수 있는 강력한 도구입니다.