[React] 리액트 서스펜스?! (React Suspense)

최근 블로그 글을 읽어보다 리액트 서스펜스라는 개념을 알게 되었다. 이전까지 진행했던 프로젝트 및 앞으로 진행할 프로젝트에 적용하면 좋을 것이라고 생각해 알아보게 되었다.

 

🧐 React Suspense 란?

리액트의 서브펜스는 16.6 버전에서 실험적(experimental) 기능으로 추가되었고 18버전부터 공식적으로 정식 기능으로 지원하기 시작했다. 이 서스펜스를 이용하면 어떤 작업이 종료되기 전에 컴포넌트의 랜더링을 중단시켜 동시에 랜더링이 되게 한다던지, 다른 컴포넌트의 랜더링을 앞 순서로 이끌 수 있다. 

 

예를 들어 (부모 컴포넌트 - 자식 컴포넌트1 - 자식 컴포넌트2) 처럼 컴포넌트들이 존재할 때 모든 컴포넌트가 비동기 작업을 포함하고 있다고 한다면 불분명한 비동기 동작의 수행 종료 시점으로 인해 부분적으로 일부씩 랜더링될 수 있다. 하지만 서스펜스 기능을 이용하면 한번에 보여줄 수 있다.

 

내가 직접 경험했던 것을 예시로 들어보면 이전에 "먹대장" 프로젝트를 진행했던 적이 있다.(https://mukdaejang-3b8e6.web.app/bestRestaurants/Seocho-Food) 이때 스켈레톤 UI가 등장하고 데이터가 로드되면 하나둘씩 보여줘야 하는 정보들로 대체가 되는데 순서가 뒤죽박죽이다. 여기에 서스펜스 기능을 사용한다면 동시에 보여지며 UX를 더욱 높일 수 있을 것이라는 생각을 했다. 

 

서스펜스를 이용하면 랜더링 시기를 조절할 수 있다. 

컴포넌트가 실행되는 순서를 조절해서 랜더링 순서를 조절 할 수 있는 것을 기대했으나 그런것은 아니었다.

 

상위 컴포넌트에서 비동기 작업을 수행하고 로드된 데이터 또는 리소스를 하위 컴포넌트로 전달한다. 이때 자식 컴포넌트에서 아직 로드되지 않은 리소스를 표시해야 하는 경우 'Suspense' 구성요소를 사용하여 리소스가 로드되는 동안 표시할 대체 컴포넌트를 지정할 수 있다.

function App() {

  return (
    <div>
      <Suspense fallback={<Loading />}>
        <Data resource={getCatImg()} />
      </Suspense>
    </div>
  );
}

fallback이라는 프로퍼티를 사용해서 대체할 컴포넌트 혹은 내용을 보여줄 수 있다. Data라는 자식 컴포넌트에는 resource라는 prop으로 getCatImg라는 함수의 반환값이 전달되는데 getCatImg 함수의 내용은 다음과 같다.

 

const getCatImg = () => {
  let data = null;
  const suspender = fetch('https://api.thecatapi.com/v1/images/search?limit=10')
    .then(response => response.json())
    .then(d => {
        data = d;
    });

  return {
    read() {
      if (data === null) {
        throw suspender;
      } else {
        return data;
      }
    },
  };
};

getCatImg 함수는 고양이 사진에 대한 정보를 담고 있는 정보를 fetch 한다. 이후 프로미스의 Pending이나 Fulfilled 여부에 상관없이 경우에 따라 다른 동작을 하는 read라는 메서드를 가진 객체를 반환한다. 

 

function Data({ resource }) {
  const data = resource.read();

  return (
    <section className="container">
      <h2 className="title">Numbers Box</h2>
      <ul>
        {data.map((item, i) => (
          <li key={i}>
            <img className="img" src={item.url} alt="" />
          </li>
        ))}
      </ul>
    </section>
  );
}

Data 컴포넌트는 위와 같이 구성이 되어 있는데 부모에게서 받은 resource의 read 메서드를 실행해 상태를 확인할 수 있다. 이때 만약 Fulfilled 되어 데이터가 정상적으로 로드되었다면 Data 컴포넌트가 랜더링되겠지만 아직 pending 상태라면 Suspense의 fallback 프로퍼티에 들어간 리액트 노드로 대체된다. 만약 작업이 실패(Rejected)한다면 어떻게 될까? 이때는 ErrorBoundary를 사용하여 에러상태를 포착하고 fallback의 리액트 노드로 대체할 수 있다.

 

function App() {

  return (
    <div>
      <ErrorBoundary fallback={<Error />}>
        <Suspense fallback={<Loading />}>
          <Data resource={getCatImg()} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

 

리액트의 기존 방식을 살펴보면 하나의 컴포넌트가 커질 수 있다. 위에서 설명한 코드의 기존 코드를 살펴보면 다음과 같은 코드들이 존재할 것이다.

function App() {
  const [isLoaded setIsLoaded] = useState(false);
  const [data setData] = useState();

  useEffect(() => {
    const getCatImg = async () => {
      const res = await fetch('https://api.thecatapi.com/v1/images/search?limit=9');
      const data = await response.json();
      return data;
    }

    setData(getCatImg());
    setIsLoaded(true); 
  }, []);

  return (
    <div>
      { isLoaded ? <Data data={data} /> : <Loading /> }
    </div>
  );
}

 

 

이때 로드가 됬는지를 확인하는데 만약 fetch하는 데이터가 여러 종류, 많다면 상황에 따른 예외처리를 해줘야 한다. 위 코드는 isLoaded라는 상태를 통해 하나의 예외처리를 했지만 경우의 수가 많아지게 되면 삼항연산자를 사용할 경우 오히려 가독성이 안 좋아질것이고 if 문을 통한 많은 분기처리가 필요하게 될 것이다. 반면 Suspense의 경우 데이터를 로드하고 그 결과에 따라 대체 노드 또는 컴포넌트를 랜더링 해주기 때문에 예외처리가 편하다. 결국 서스펜스를 이용하면 코드 가독성과 유지 보수성을 향상시킬 수 있을 것으로 기대된다.

 

구현된 결과물!!

 

부족한 부분을 채우고 React.lazy()에 대해서도 추가할 예정입니다! 혹시 틀린 내용이 있다면 댓글로 남겨주시면 감사하겠습니다!!!