React Suspense 사용해보기!

 

React 18이 발표되면서 Suspense가 나왔었습니다.

시간이 좀 지나긴 했지만, 이제라도 한번 알아볼까 합니다.

 

우선 React Suspesnse는 어떤 데이터를 받아오는 동안 랜더링 순서를 변화하거나 대기하며 다른 로딩화면 같은걸 띄워놓고 데이터 패칭이 완료되면 데이터를 이용한 완성된 UI를 보여준다는 느낌? 역할 인 것 같다.

이와 비슷한 역할로 그동안 작성해왔던 방법은 fetching 상태를 가지고 있는 true | false 의 상태 값을 이용하여, 

데이터 받아오기가 완료되면 다시 상태를 바꾸고, 그걸로 랜더링을 조종하는 방식 이었습니다.

예를 들어 다음과 같이 짤 수 있겠죠.

function App(){
	const [loadingState, setloadingState] = useState(false);
    
    useEffect(() => {
        const dataFetch = () => {
            ... data 불러오는 과정
            완료시 setloadingState(true);
        }
    }
    
    if(!loadingState){
    	return <div>로딩중..</div>
    } else return <div>완료..</div>
 }

 

이 방법도 아직까지 짧은 코드나 간단한 로직에서는 간단하게 짜서 적용할 수 있을 것 같습니다.

 

이번엔 React suspense를 이용하여 만들어 보겠습니다.

function dataFetchFunction() {
  let data: any = null;
  const suspender = fetch(" API ")
    .then((response) => response.json())
    .then((d) => {
      data = d;
    });

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

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

  return (
    <div> data를 활용한 결과물들 </div>
  );
}

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <Data resource={dataFetchFunction()} />
      </Suspense>
    </div>
  );
}

위으 처럼 비동기 통신을 통해 데이터를 받아오고 그 결과를 받아오기 전까지는 fallback에 있는 loading 컴포넌트가 보이게 하고, 완료된 후에는 data를 활용한 결과물들을 랜더링 하는 방식으로 작동됩니다.

 

- 자식 컴포넌트를 Suspense로 감싸고 

- fallback에 로딩 시 보여쥴 ui를 작성한다