React - 비동기 통신 SWR

🧐useSWR란? 

useSWR은 React에서 데이터를 자동으로 캐싱하고, 재검증하며, 동기화하는 데 도움을 주는 훅(hook)이다. SWR은 Stale-While-Revalidate의 약자로, 오래된 데이터와 새로운 데이터를 함께 처리하는 전략에서 이름을 따왔다. 이 훅은 비동기 데이터 요청에 관련된 복잡한 로직을 쉽게 처리할 수 있도록 설계되었다. 

※ 데이터를 자동으로 캐싱한다. 
한 번 가져온 데이터를 저장해 두고, 같은 데이터를 다시 요청할 때 서버로 또다시 요청하지 않고 저장된 데이터를 사용하는 것

 

📌주요기능

데이터 가져오기(fetching)

• useSWR은 주어진 키(key)와 fetcher 함수(API 호출 등을 수행하는 함수)를 사용하여 데이터를 가져온다. 

자동 캐싱

• 데이터를 캐시(Cache)하고, 동일한 키를 사용하는 요청은 캐시된 데이터를 먼저 반환한다. 

자동 갱신(revalidation)

• 캐시된 데이터를 즉시 반환한 후, 백그라운드에서 새 데이터를 다시 가져와 화면을 업데이트한다. 

리얼타임 데이터 동기화

• 서버와 클라이언트 간의 데이터가 실시간으로 일치하도록 하는 기능이다. 데이터가 바뀌거나 새로고침할 필요가 있을 때, 자동으로 새 데이터를 가져오고 화면을 최신 상태로 유지한다.

에러 처리

• 데이터 로딩이 실패했을 경우, 오류 상태를 감지하고 쉽게 처리할 수 있도록 해준다.

 

예시 코드로 현재 진행하고 있는 프로젝트를 가져와봤다.

🗂️예시 코드 

  const { data, error } = useSWR('subjects', getSubjectEditList);

  // 데이터가 로드되면 상태를 업데이트
  if (data && data.subjects !== subjects) {
    setSubjects(data.subjects);
  }

  if (error) {
    console.error('Failed to load subjects:', error);
  }

 

SWR 훅을 사용해 데이터 로드

useSWR 훅을 호출하여 subjects라는 키를 기준으로 getSubjectEditList 함수를 실행

이 훅은 data와 error 두 가지 값을 반환한다. 

• data: API 호출이 성공했을 때 가져온 데이터를 담고 있다. 
• error: API 호출이 실패했을 때 발생한 에러를 담고 있다.

 

데이터가 성공적으로 로드되면 상태 업데이트

data가 존재하고, data.subjects가 현재 상태로 저장된 subjects와 다를 경우에만 setSubjects(data.subjects)를 실행하여 상태를 업데이트

• data && data.subjects !== subjects
  • data가 존재하는지(data가 null이나 undefined가 아닌지) 확인
  • data.subjects와 현재 상태의 subjects가 동일하지 않은 경우에만 실행. 이는 중복된 상태 업데이트를 방지한다. 
• setSubjects(data.subjects)
  • useSubjectStore에서 관리하는 subjects 상태를 새롭게 가져온 data.subjects로 업데이

 

📌 SWR을 사용한 경우- 상태 관리 차이 

1.SWR을 사용한 경우

import React from 'react';
import useSWR, { mutate } from 'swr';

// 데이터 fetcher
const fetcher = (url: string) => fetch(url).then((res) => res.json());

function ComponentA() {
  const { data, mutate } = useSWR('/api/data', fetcher);

  const handleUpdate = () => {
    mutate({ data: 'Updated from ComponentA' }, false); // 캐시 업데이트
  };

  return (
    <div>
      <h2>Component A</h2>
      <p>Data: {data?.data || 'Loading...'}</p>
      <button onClick={handleUpdate}>Update Data</button>
    </div>
  );
}

function ComponentB() {
  const { data } = useSWR('/api/data', fetcher);

  return (
    <div>
      <h2>Component B</h2>
      <p>Data: {data?.data || 'Loading...'}</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <ComponentA />
      <ComponentB />
    </div>
  );
}

 

2. SWR 없이 상태 리프팅으로 구현한 경우

import React, { useState } from 'react';

function Parent() {
  const [data, setData] = useState<{ data: string } | null>(null);

  // 데이터 fetch 함수 (최초 로드)
  React.useEffect(() => {
    fetch('/api/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  const updateData = (newData: string) => {
    setData({ data: newData }); // 상태 갱신
  };

  return (
    <div>
      <ComponentA data={data} updateData={updateData} />
      <ComponentB data={data} />
    </div>
  );
}

function ComponentA({ data, updateData }: { data: { data: string } | null; updateData: (newData: string) => void }) {
  const handleUpdate = () => {
    updateData('Updated from ComponentA');
  };

  return (
    <div>
      <h2>Component A</h2>
      <p>Data: {data?.data || 'Loading...'}</p>
      <button onClick={handleUpdate}>Update Data</button>
    </div>
  );
}

function ComponentB({ data }: { data: { data: string } | null }) {
  return (
    <div>
      <h2>Component B</h2>
      <p>Data: {data?.data || 'Loading...'}</p>
    </div>
  );
}

export default Parent;

 

 

코드 분석: SWR vs 상태 리프팅

데이터 로드	useSWR로 내부적으로 fetch 관리 (fetcher 함수 전달).	useEffect로 fetch 호출 후 setState로 상태 관리.
데이터 공유 방식	SWR의 캐시를 활용. 동일한 URL 요청은 자동으로 데이터 공유.	부모 컴포넌트에서 상태를 관리하고, props로 자식에게 전달.
상태 업데이트	mutate 호출 시 SWR 캐시 갱신. 다른 컴포넌트도 즉시 최신 데이터 반영.	setData 호출로 상태 갱신. 상태가 변경되면 관련된 모든 컴포넌트가 리렌더링.
추가 로직 필요성	거의 없음. SWR이 자동으로 캐시 관리, 리렌더링, 동기화 처리.	수동으로 상태를 전달하고, 업데이트 로직 작성 필요.
사용성	코드가 간결하고 데이터 fetch/동기화 관리 로직이 최소화됨.	상태 전달(props drilling)로 인해 계층이 깊어지면 관리가 어려움.
새로고침/포커스 관리	SWR이 자동으로 재검증 (revalidateOnFocus 등) 처리.	추가 로직을 작성하지 않으면 데이터가 갱신되지 않음.
데이터 일관성 유지	동일한 URL의 데이터를 사용하는 모든 컴포넌트가 자동으로 동기화됨.	상태를 수동으로 전달하므로, 잘못 관리하면 일관성이 깨질 가능성 있음.

 

예제 실행 결과

SWR 사용 시

ComponentA에서 mutate를 호출하여 데이터를 갱신하면

• SWR의 캐시가 업데이트되고, 동일 데이터를 사용하는 ComponentB도 즉시 새로운 데이터를 표시.
• 데이터 관리 로직이 필요 없음.

상태 리프팅 사용 시

ComponentA에서 updateData를 호출하면

• Parent에서 상태가 갱신되고, 이를 전달받는 ComponentB가 리렌더링되어 새로운 데이터를 표시.
• props로 상태와 업데이트 함수를 전달해야 하므로 계층이 깊어질수록 코드가 복잡해짐.

 

결론

 

SWR의 장점

• 캐시와 동기화를 SWR이 자동으로 처리하므로 데이터 로직을 최소화할 수 있음.
• URL 기반 데이터 관리로 데이터 일관성을 쉽게 유지.
• 페이지 포커스, 네트워크 상태 변화 시 자동 재검증 가능.

상태 리프팅의 단점

• 부모-자식 간 props 전달로 인해 계층이 깊어질수록 관리가 어려움.
• 추가 로직(상태 관리, fetch, 상태 동기화)을 개발자가 직접 작성해야 함.

SWR은 특히 데이터 중심 애플리케이션에서 개발 생산성을 크게 향상시킬 수 있는 도구입니다. 😊

 

결론

• useSWR은 데이터 페칭 및 캐싱, 자동 갱신과 같은 복잡한 비동기 로직을 간편하게 처리하고, 실시간으로 데이터를 유지하는 데 적합.
• useEffect는 API 호출이나 비동기 작업을 제어할 수 있지만, 데이터 관리와 캐싱을 직접 처리해야 하기 때문에 단순한 부수 효과를 처리하는 데 더 적합.

 

 

참고자료 

• https://velog.io/@ysg81/React-useSwr-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0