🚀 [React] React16과 Suspense, 직접 구현해보기 1

Posted on Jan 1, 2023 #suspense #react

개요

Suspense는 어떻게 동작할까?

ErrorBoundary가 error를 감지해서 throw 하는 것 처럼, Suspense는 Promise를 감지한다.

Suspense 는 왜 사용하면 좋을까?

무엇과 어떻게를 분리할 수 있고, 컴포넌트 내부에서는 데이터 페칭에 관련된 상태(로딩, 실패, 성공)를 관리하거나 신경쓰지 않아도 된다.

→ 선언적 프로그래밍(어떤걸 가지고 무엇을 할지)이 가능해짐

대수적 효과와 Suspense

대수적 효과는 감싸고 있는 함수의 로직이 감싸진(내포하는) 함수의 역할을 분리할 때 실현된다.
React의 Suspense는 자식 컴포넌트를 감싸는 부모 컴포넌트에게 로딩 UI 표시라는 역할을 분리하고 있다.
React의 Suspense의 창안 원리는 대수적 효과이다.

본론

React 18 이전의 Suspense는 Data Fetching을 위한 Pending Handler가 아니라, 기존의 워터폴 방식으로 이루어져있는 Render방식을 개선해주는 역할이다. https://sangminnn.tistory.com/76

필요한 구조

promise를 감지해서 컴포넌트를 suspended 상태로 만들어 줄 장치 (data fetching을 위한 suspense)
- react-query의 suspense 옵션 사용했을 때와 같은 구조를 직접 만들어보려고 함
- 이미지, dynamic import, fetching을 모두 지원
- 이후 api 호출할 때 위의 장치를 통해 호출해야 함
에러 바운더리

→ @toss/async-boundary

참고 블로그

WrappedPromise(createPromiseResource) → useFetch 훅으로 고도화

// suspense와 함께 사용하기 위해, 자식 컴포넌트에서 비동기적으로 데이터 패치 시 이 유틸 사용
const createPromiseResource = (promise) => {
  let status = "pending";
  let result = null;

  const suspender = promise.then(
    (res) => {
      status = "fulfilled";
      result = res;
    },
    (err) => {
      status = "rejected";
      result = err;
    }
  );

  return {
    read() {
      switch (status) {
        case "pending":
          throw suspender;
        case "fulfilled":
          throw result;
        case "rejected":
          throw result;
        default:
          break;
      }
    },
  };
};

export default createPromiseResource;

// 비동기 호출을 하는 컴포넌트
import React, { useState, useEffect } from "react";

import { getUser } from "../apis";
import createPromiseResource from "../utils/createPromiseResource";

// 여기서 react-query나 axios로 비동기 fetch 작업 진행
// https://6391fa92b750c8d178d35d54.mockapi.io/api/profile/:id

const useResource = (id) => createPromiseResource(getUser(id)).read();

function UserItem({ id }) {
  const data = useResource(id);

  return <div>이름: {data.name}</div>;
}

export default UserItem;

ErrorBoundary

import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props); // props로 errorFallback을 받을 수 있음
    this.state = {
      error: null,
    };
  }

  static getDerivedStateFromError(error) {
    console.log("getDerivedStateFromError");
    return { error };
  }

  componentDidCatch(err, info) {
    console.log("componentDidCatch", err, info);
    this.setState({
      error: err,
    });
  }

  render() {
    if (this.state.error) {
      return this.props.fallback ?? <h3>에러가 발생했습니다 :(</h3>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

1차 시도 코드에서 문제점

비동기 호출을 하는 컴포넌트에서 createPromiseResource 를 사용할 때,
- 즉시 실행 함수로 getUser(id)받고 있었기 때문에 계속해서 실행되고 있었음
부끄럽게도 근본적으로 .then().catch()문을 잘못 쓰고 있었음(문법 에러)
1의 문제점을 해결하면서 근본적인 문제를 발견했는데, createPromiseResource 유틸을 리액트 밖에 빼두긴 했지만 즉시 실행 함수로 만들었기 때문에 (.read()) 리액트 내부에서 실행할 때마다 새로 생성되고 있었음

→ status가 pending인 상태가 계속 생성 (원래는 한 번만 만들어지고 그 status의 상태가 업데이트 되어야 함)

해결 방법

아래와 같이 즉시 실행 함수로 사용한 부분을 수정함

    
 // 비동기 호출을 하는 컴포넌트
 const useResource = (id) => createPromiseResource(() => getUser(id));
    
 function UserItem({ id }) {
   const { data } = useResource(id).read(); // read()는 위에 있으나 여기 있으나 차이 없음
    
   return <div>이름: {data.name}</div>;
 }
    
 export default UserItem;

이에 따라 suspender에서 promise를 실행한 뒤에 .then 호출하도록 변경

 // createPromiseResource
 const suspender = promise().then(...) // 기존: promise.then(...)

문법 수정

 // createPromiseResource
 let suspender = promise()
     .then((res) => {
       status = "fulfilled";
       result = res;
     })
     .catch((err) => {
       status = "rejected";
       result = err;
     });

이 문제를 해결하기 위해서는 리액트 생명주기를 벗어난 전역 상태 관리가 필요했다. (useRef 등도 소용 없음 - suspense에 갖힌 상태에서는 애초에 렌더링 조차 하지 않으므로 비교할 대상이 없음)

store 전역 객체 추가
요청을 할 때마다 어떤 요청에 대한 상태인지 식별하기 위해 key 추가 (feat. react-query)

 const store = {};
    
 const createPromiseResource = (key, promise) => {
   if (!store[key]) {
     store[key] = {
       status: "pending",
       result: null,
     };
   }
    
   let suspender = promise()
     .then((res) => {
       store[key].status = "fulfilled";
       store[key].result = res;
     })
     .catch((err) => {
       store[key].status = "rejected";
       store[key].result = err;
     });
    
   return {
     read() {
       switch (store[key].status) {
         case "pending":
           throw suspender;
         case "rejected":
           throw store[key].result;
         default:
           return store[key].result;
       }
     },
   };
 };
    
 export default createPromiseResource;

리팩토링 하는 과정과 얻게 된 결과물에 대한 정리는 다음 포스팅에서..!

# 카테고리

BOJ 36
Algorithm 12
CodingTest 11
Web 9
Javascript 8
Vue 7
React 7
DBProject 4
Python 3
Tech-interview 3
Express 3
Next 3
Github 2
Django 2
C 1
C++ 1
WebGame 1

ray