오늘은 react에서의 suspense를 사용하여 스켈레톤 컴포넌트를 적용해보겠다

요즘은 블로그 업로드를 잘 하지 못했던게 아무래도 맡고있는 프로젝트때문에 시간이 잘 나지않았지만

다시 꾸준하게 작성해보려고 한다.

react suspense는 무엇일까?

Suspense라는 React의 기술을 활용하면 컴포넌트의 랜더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 랜더링할 수 있다.

한 마디로 비동기 Pending 관리하기 라고 볼 수 있다.

Suspense는 어떠한 컴포넌트가 읽어야 하는 데이터의 상태를 보고있고 아직 준비가 되지 않았다고 리액트에게 알려주는 새로운 매커니즘이다.

<script>
import { useState, useEffect } from "react";
import Posts from "./Posts";

function User({ userId }) {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState([]);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((response) => response.json())
      .then((user) => {
        setTimeout(() => {
          setUser(user);
          setLoading(false);
        }, 3000);
      });
  });

  if (loading) return <p>사용자 정보 로딩중...</p>;
  return (
    <div>
      <p>{user.name} 님이 작성한 글</p>
      <Posts userId={userId} />
    </div>
  );
}

export default User;
</script>

위 코드는 https://www.daleseo.com/react-suspense/를 토대로 작성했다.

여기서의 논점은 우리는 스테이트를 만들고 스테이트의 값을 변화시키고 랜더링시키고
useEffect의 fetch로 데이터를 요청할때 promise가 반환되기 때문에 코드블록이 종료되면 then문을 이용한 콜백이 차례대로 실행된다.

data를 set해서 추가해주는건 괜찮다고 생각되지만 loading까지 또 state를 만들어야할까? 에 대한 생각은 고민이 필요해보인다 .

react에서는 suspense라는것을 제공하는데 어떻게 해결하고 실제 예시에서 사용해볼지 생각해보자.

<script>
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}
</script>

react.lazy

위와 같은 코드에서 먼저 알아야 할 부분은 react.lazy가 무엇이지 ? 라고 생각 해 볼 필요가 있다.

리액트 공식 홈페이지에 보면

React.lazy()를 사용하면 동적으로 불러오는 컴포넌트를 정의할 수 있습니다. 그러면 번들의 크기를 줄이고, 초기 렌더링에서 사용되지 않는 컴포넌트를 불러오는 작업을 지연시킬 수 있습니다.
// 이 컴포넌트는 동적으로 불러옵니다

라고 설명 되어있다.

React.Suspense 의 fallback={}

또한 react.Suspense의 fallback은 무엇일까?

간단하게 fallback은 데이터가 안들어온 즉 로딩상태면 fallback={컴포넌트1}로 작성하는것이다.

실전에서의 코드를 보자.

<script>
const 컴포넌트 = () => {
const OtherComponent = React.lazy(() => import("@globalComponents/search/SearchList"))
}
//위 코드는 의사 코드이다 . 
  <Suspense fallback={<SkeletonCompo boardItems={boardItems}></SkeletonCompo>}>
       {value}></SearchList> */}
   <OtherComponent boardItems={boardItems} value={value} />
  </Suspense>
</script>

위의 코드처럼 로딩중인시점에 보여줄 SkeletonCompo를 만들었고 fallback안에 두었다.

그리고 리액트가 처리가 끝난지 안끝난지를 감지하기 때문에 데이터의 패칭이 끝나면
OtherComponent를 보여줄 것이다. 중요한점은 이렇게 만든 OtherComponent도 컴포넌트 자체이기 때문에 props전달이 가능하고 똑같이 활용가능하다.

이렇게 적용하게 되면 불필요한 loading state , 그리고 fetch를해서 promise를 반환하는 시점에서의 데이터의 트레킹이 줄게된다. ex( .then(()=>setState()) ) <<<