React에서 Suspense와 Concurrent Mode 이해하기

 

React 생태계는 사용자 경험을 극대화하고 개발 생산성을 향상시키기 위해 끊임없이 진화하고 있습니다. 그 중에서도 Suspense와 Concurrent Mode는 React의 성능과 사용자 경험을 획기적으로 개선할 수 있는 중요한 기능입니다. 이 글에서는 Suspense와 Concurrent Mode의 개념, 사용법, 그리고 실제 예제를 통해 각각의 기능이 어떻게 작동하고 우리에게 어떤 이점을 제공하는지 알아보겠습니다.

---

Suspense란 무엇인가요?

Suspense는 React 컴포넌트가 데이터나 리소스를 로드하는 동안 "대기 상태"를 관리할 수 있도록 도와주는 기능입니다. 이를 통해 사용자에게 더 나은 경험을 제공할 수 있습니다. 주로 React.lazy와 함께 코드 스플리팅(Code Splitting)이나 데이터 패칭(Data Fetching)을 구현할 때 사용됩니다.

주요 특징

1. 로딩 상태 관리:
   • 컴포넌트가 준비되지 않았을 때 보여줄 "로딩 UI"를 쉽게 정의할 수 있습니다.
2. 코드 스플리팅 지원:
   • React.lazy를 활용하면 큰 애플리케이션을 작은 청크로 나눠 초기 로드 시간을 단축할 수 있습니다.
3. 단순하고 직관적:
   • Suspense의 설정은 간단하며, 복잡한 상태 관리 로직을 대체할 수 있습니다.

기본 사용법

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>로딩 중...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

위 예제에서는 LazyComponent가 로드되는 동안 "로딩 중..." 텍스트가 화면에 표시됩니다.

---

Concurrent Mode란 무엇인가요?

Concurrent Mode는 React가 UI 업데이트를 더 효율적으로 처리할 수 있도록 도와주는 새로운 렌더링 모드입니다. 주요 목표는 사용자 경험을 개선하기 위해 작업 우선순위를 설정하고, 긴 작업을 중단하거나 조정할 수 있는 기능을 제공하는 것입니다.

주요 특징

1. 비동기 렌더링:
   • 렌더링 작업을 중단하고 높은 우선순위의 작업(예: 사용자 입력)을 먼저 처리할 수 있습니다.
2. 더 부드러운 UI 업데이트:
   • 애니메이션, 입력 반응, 스크롤 등이 끊김 없이 매끄럽게 동작합니다.
3. 지연된 작업 관리:
   • 긴 작업을 사용자 경험에 영향을 주지 않도록 나눠서 실행합니다.

사용 예시

import React, { useState, useTransition } from 'react';

function App() {
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const input = e.target.value;
    setValue(input);

    startTransition(() => {
      const filteredList = Array.from({ length: 10000 }, (_, i) => `${input} - ${i}`);
      setList(filteredList);
    });
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      {isPending && <div>업데이트 중...</div>}
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

위 코드는 useTransition을 사용하여 긴 작업(리스트 생성)을 저우선순위로 처리하는 방식으로 UI 응답성을 유지합니다.

---

Suspense와 Concurrent Mode를 함께 사용하기

Suspense와 Concurrent Mode는 함께 사용될 때 더 강력한 기능을 발휘합니다. 특히 데이터 패칭(Data Fetching)과 같은 시나리오에서 유용합니다.

React 18에서 데이터 패칭 예제

React 18부터는 Suspense를 데이터 패칭에 활용할 수 있습니다. 예를 들어, React.Suspense와 useTransition을 조합하여 데이터를 비동기로 로드하고 렌더링하는 방식을 구현할 수 있습니다.

import React, { Suspense, useState, useTransition } from 'react';

function fetchData(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`데이터: ${id}`);
    }, 2000);
  });
}

function DataComponent({ id }) {
  const [data, setData] = useState(null);

  React.useEffect(() => {
    let isMounted = true;
    fetchData(id).then((result) => {
      if (isMounted) setData(result);
    });
    return () => {
      isMounted = false;
    };
  }, [id]);

  if (!data) {
    throw new Promise((resolve) => setTimeout(resolve, 2000));
  }

  return <div>{data}</div>;
}

function App() {
  const [id, setId] = useState(1);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => setId((prev) => prev + 1));
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? '로딩 중...' : '다음 데이터'}
      </button>
      <Suspense fallback={<div>데이터 로드 중...</div>}>
        <DataComponent id={id} />
      </Suspense>
    </div>
  );
}

export default App;

위 코드에서는 버튼을 클릭하면 DataComponent가 새로운 데이터를 로드하고 Suspense를 사용하여 로딩 상태를 처리합니다. Concurrent Mode 덕분에 버튼 클릭과 데이터 로드가 서로 독립적으로 처리되어 UI가 끊기지 않습니다.

---

Suspense와 Concurrent Mode를 사용할 때 주의사항

1. 서드파티 라이브러리 호환성:
   • 모든 라이브러리가 Concurrent Mode와 호환되는 것은 아니므로 검토가 필요합니다.
2. 적절한 로딩 UI 제공:
   • Suspense의 fallback은 사용자 경험에 큰 영향을 미치므로 신중하게 디자인해야 합니다.
3. 테스트 환경에서의 사용:
   • Concurrent Mode는 아직 실험적인 기능이므로 테스트와 디버깅이 까다로울 수 있습니다.

---

결론

Suspense와 Concurrent Mode는 React 애플리케이션에서 성능과 사용자 경험을 혁신적으로 개선할 수 있는 도구입니다. Suspense는 데이터 로딩 및 코드 스플리팅의 복잡성을 줄이고, Concurrent Mode는 사용자 중심의 비동기 렌더링을 가능하게 합니다. 두 기능을 적절히 활용하여 더 나은 React 애플리케이션을 만들어 보세요!