[React] React 18 버전에서의 Suspense

※ React 18 버전에서의 Suspense

  - 각 페이지에 구성되 있는 컴포넌트들을 동시에 호출하는 것이 아닌 영역별로 렌더링 시점을 동기화 처리
  - 이전 버전까지는 클라이언트 컴포넌트에서만 제한적으로 동작되는 기술이었으나 18버전부터는 ssr 방식의 컴포넌트에서도 활용 가능하도록 개선

활용 예제)
  1. 특정 컴포넌트가 렌더링 완료 될 때까지 다른 컴포넌트의 렌더링을 막고 이전 렌더링 컴포넌트 완료 후 동기적으로 렌더링 시작
  2. 서버로부터 무거운 데이터를 fecthing하는 컴포넌트의 경우 해당 컴포넌트 출력전까지 자동으로 로딩바 출력

 

 

suspense를 활용 하기 위한 조건

- suspense 동기화 시키는 컴포넌트 내부에 promise 객체 생성 상태(pending, fullfilled , rejected)를 추적 할 수 있어야 됨.

 

 

예제)  useGetData.js

import { useState, useEffect } from 'react';
import axios from 'axios';

//promise 객체를 인수로 받아서 해당 promise 상태에 따라 반환되는 값을 직접 리턴해주는 함수를 반환
const checkPromiseStatus = (promise) => {
	let status = 'pending';
	let result;

	//promise의 상태에 따라 현재 상태값과 반환값을 각각 status, result 변수에 담아줌
	const setPromise = promise.then(
		(value) => {
			status = 'success';
			result = value;
		},
		(error) => {
			status = 'error';
			result = error;
		}
	);

	//위에서 저장되는 status값에 따라 fetching된 결과값을 반환하는 함수를 리턴
	return () => {
		switch (status) {
			case 'pending':
				throw setPromise;
			case 'success':
				return result;
			case 'error':
				throw result;
			default:
				throw new Error('Unknow Status');
		}
	};
};

function useGetData(url) {
	const [Data, setData] = useState(null);

	useEffect(() => {
		const getData = async () => {
			//데이터 요청 후 현재 데이터 상태를 확인하는 promise 객체 자체를 비동적으로 받음
			const promise = axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => response.data);

			//해당 promise 객체를 checkPromiseStatus 함수의 인수로 전달해서 직접 동기화 시키는 커스텀함수 호출후 결과값을 반환값을 state에 담아줌
			setData(checkPromiseStatus(promise));
		};

		getData();
	}, [url]);

	//state에 담아진 promise 반환 값을 리턴
	return Data;
}

export default useGetData;

 

Posts.js

import useGetData from './useGetData';

function Posts() {
	const data = useGetData('https://jsonplaceholder.typicode.com/posts');
	console.log(data);
	return (
		<div>
			{data &&
				data.map((post) => {
					return (
						<div key={post.id}>
							<h2>{post.title}</h2>
							<br />
							<p>{post.body}</p>
							<hr />
						</div>
					);
				})}
		</div>
	);
}

export default Posts;

 

App.jsx

import Posts from './Posts';
import { Suspense } from 'react';

function App() {
	return (
		<div className='App'>
			<h1>App</h1>
			<Suspense fallback={<p>Posts loadding...</p>}>
				<h1>Posts</h1>
				<Posts />
			</Suspense>
		</div>
	);
}

export default App;