안녕하세요

[KyuTae98]

안녕하세요. 똥믈리에 박규태입니다.
오늘 가져온 코드는 작년에 진행했던 프로젝트에서 react Suspense관련 코드입니다.

문제 상황

프로젝트를 진행 중 로딩 상황을 어떻게 제어할지 고민하다 선배의 조언으로 선언적으로 제어하기로 하였습니다.
문제는 프로미스를 어디서 던져 주냐였습니다.

1. 컴포넌트 안에서 던져준다. -> 계속 무한 로딩이 걸린다.
2. 컴포넌트 같은 파일 외부에서 던져준다. -> 개발환경이 CSR이라 던져주는 이미지 마다 바뀌지 않는다.

해결 방법

그래서 생각해낸 방법으로는 promise를 부모에서 props로 던져주는 방식이었습니다.
다행이 문제는 해결되었지만 다른 분들이었다면 어떻게 해결했을지 매우 궁금합니다.

const ResultMain = lazy(() => import("../component/result/ResultMain"));

const ResultPage = () => {
  const { image } = useContext(ImageContext);
  const navigate = useNavigate();
  const isLogin = localStorage.getItem("loginState");

  return (
    <>
      <Header />
      <ErrorBoundary fallback={<Loading />}>
        <Suspense fallback={<Loading />}>
          <StyledResult>
            <ResultMain Resource={ImageChange(image)} />
          </StyledResult>
        </Suspense>
      </ErrorBoundary>
    </>
  );
};

export default ResultPage;

promise를 던져주는 부모 컴포넌트입니다.

const ImageChange = (image) => {
  const userPromise = TransferImg(image).then((new_url) =>
    GetImgUrlToFile(BaseUrl + new_url.url).then((file) => file)
  );
  return {
    image: wrapPromise(userPromise),
  };
};

wrapping된 promise를 return해주는 함수입니다.

const ResultMain = ({ Resource }) => {
  const { image } = useContext(ImageContext);
  const navigate = useNavigate();
  const imageFile = Resource.image.read();
  const imageDownload = () => { //볼 필요 없는 함수1
    let link = document.createElement("a");
    link.href = URL.createObjectURL(imageFile);
    link.download = imageFile.name;
    link.click();
  };
  const TransformAnotherImage = () => {//볼 필요 없는 함수2
    navigate("/change");
    window.location.reload();
  };
  return (
    <>
      <StyleImgBox>
        <StyleImg src={URL.createObjectURL(image)} alt="origin" />
        <StyleImg src={URL.createObjectURL(imageFile)} alt="transfer" />
      </StyleImgBox>
      <StyledSurvetAndBtn>
        <ResultSurveyCard imageFile={imageFile} />
        <ImgBtn label="DOWNLOAD" clickfuc={imageDownload} />
        <ImgBtn label="다른 이미지 변환" clickfuc={TransformAnotherImage} />
      </StyledSurvetAndBtn>
    </>
  );
};

promise를 받는 자식 컴포넌트

참고

코드 똥믈리에 답게 자바스크립트 코드를 들고 왔습니다. 너그러운 마음으로 이해주시기 바랍니다.

[Wisesaturn]

구조가 너무 깔끔한데요 ㄷㄷ
저였어도 이미지를 Props로 던져준 후 그 안에서 재가공 했을 것 같습니다.
굳이 수정한다면 ImageContext 내에서 뭔가 더 로직을 담았을 것 같네요 😎
SKT입니다.. Super Kyu Tae...

[regularPark]

왜 무한로딩이 걸렸는지 궁금합니다. 제 머리론 코드만 봐서는 어디서 문제였을지 유추가 안되네요.

react-query를 사용했으면 조금 더 용이하게 구현할 수 있었을 것 같은데, 라이브러리 사용은 금지되었었나요?

[bbearcookie]

에러와 로딩 처리를 외부로 위임하는 선언적 처리가 인상 깊네요.. 👍👍

저도 Promise를 어디에 정의하고, 어디에서 throw할 것인지가 고민이 됐던 경험이 있었는데 지금 생각해본다면 비동기 요청을 필요로 하는 컴포넌트와 동일한 위치에 Promise를 생성하는 함수를 정의하고, 이 컴포넌트를 사용하는 측에서 Promise를 생성해서 Props로 전달해줄 것 같네요!

컴포넌트의 트리가 깊어져도 필요한 비동기 요청을 미리 수행하는 Render-as-you-fetch 전략의 장점을 누리기 위해서?

(아래처럼 비동기 요청이 처리되는 동안에는 throw Promise하는 공통 함수를 추상화할 수 있을까 싶긴 한데, SWR이나 TanStack Query같은 라이브러리를 사용하는 것이 더 편리할 것 같기도 하네요.. 😅)

import axios from 'axios';
import type { AxiosRequestConfig } from 'axios';

const client = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
});

export interface Resource<TData> {
  read: () => TData;
}

export const suspenseFetch = <TData>(config: AxiosRequestConfig): Resource<TData> => {
  let status: 'pending' | 'success' | 'error' = 'pending';
  let data: TData;
  let error: unknown;

  const suspender = client<TData>(config)
    .then((res) => {
      status = 'success';
      data = res.data;
    })
    .catch((err) => {
      status = 'error';
      error = err;
    });

  const read = () => {
    switch (status) {
      case 'pending':
        throw suspender;
      case 'error':
        throw error;
      default:
        return data;
    }
  };

  return { read };
};

export default suspenseFetch;

References
https://fe-developers.kakaoent.com/2021/211127-211209-suspense/

[qhahd78]

왜 한무로딩이 걸렸는지 저도 궁금하네욜...

const ResultMain = () => {
  const { image } = useContext(ImageContext);
  const navigate = useNavigate();
  // 여기서 call ? 
  const imageFile = ImageChange(image);
  const imageDownload = () => { //볼 필요 없는 함수1
    let link = document.createElement("a");
    link.href = URL.createObjectURL(imageFile);
    link.download = imageFile.name;
    link.click();
  };
  ...

요렇게 하면 안되는 것인가,, ? 제가 Suspense 를 잘 몰라서 어떤 이유로 한무로딩이 걸렸는지 참으로 궁금합니다.. 천재 여러분들이 알려주십셔...

• 그리고 react-query 와 suspense 를 함께 사용하는 방법에 대해서 찾아봤는데,
  • toss slash 에 https://www.slash.page/ko/libraries/react/react-query/src/hooks/useSuspendedQuery.i18n
    요런 깜(끔)찍한 라이브러리가 있네요. 참고용으로 링크 달아둡니다

똥믈리에라고 하시기엔 너무나도 perfect 한 코드라 한 수 접고 갑니다....