08.16 Promise.all/ LazyLoad & PreLoad

1. Promise.all

promise.all 메서드는 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용한다.

다음의 예제는 3개의 Data를 순차적으로 비동기 처리한다. 앞선 비동기 처리가 완료되면 다음 비동기 처리를 수행한다. Data1은 3초,Data2는 2초, Data3은 1초, 총 6초가 소요된다. 3개의 비동기 처리는 서로 의존하지 않고 개별적으로 수행된다. 앞 순서의 비동기 처리 결과를 다음 비동기 처리가 사용하지 않는다. 그래서 3개의 비동기 처리를 순차적으로 처리할 필요가 없다.

const Data1 = () =>
	new Promise(resolve => setTimeout(() => resolve(1), 3000));
const Data2 = () =>
	new Promise(resolve => setTimeout(() => resolve(2), 2000));
const Data3 = () =>
	new Promise(resolve => setTimeout(() => resolve(3), 1000));
    
// Data 1,2,3의 비동기 처리를 순차적으로 처리

const res=[];
Data1()
	.then(data => {
		res.push(data);
        return Data2();
     })
    .then(data => {
		res.push(data);
        return Data2();
     })
    .then(data => {
		res.push(data);
        return Data2();
     })

Promise.all 메서드는 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용한다. 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달 받느다. 전달받은 모든 프로미스가 모두 fulfilled 상태가 되면 모든 처리결과를 배열에 저장해 새로운 프로미스를 반환한다.

const Data1 = () =>
	new Promise(resolve => setTimeout(() => resolve(1), 3000));
const Data2 = () =>
	new Promise(resolve => setTimeout(() => resolve(2), 2000));
const Data3 = () =>
	new Promise(resolve => setTimeout(() => resolve(3), 1000));

// Data1,2,3의 비동기 처리를 병렬로 처리

Promise.all([Data1(), Data2(), Data3()])
	.then(console.log) //[1,2,3] >> 약 3초 소요
    .catch(console.error);

Data1 Promise는 3초 후에 1을 resolve한다.
Data1 Promise는 2초 후에 2을 resolve한다.
Data1 Promise는 1초 후에 3을 resolve한다.

인수로 전달받은 배열의 모든 프로미스가 모두 fulfilled상태가 되면 종료한다. 이때 첫 번째 프로미스가 가장 나중에 fullfiled 상태가 되어도 Promise.all 메서드는 첫 번째 프로미스가 resolve한 처리 결과부터 차례로 배열에 저장하여 그 배열을 resolve하는 새로운 프로미스를 반환한다. Promise.all 메서드는 처리 순서가 보장된다.

인수로 전달받은 배열의 프로미스가 하나라도 rejected 상태가 되면 나머지 프로미스가 fullfilled 상태가 되는 것을 기다리지 않고 바로 종료한다.

2. LazyLoad & PreLoad

LazyLoad

페이지를 읽어들이는 시점에 사용자에게 보여지는 부분만 먼저 로드를 하여 데이터의 낭비를 막는 기능이다. 페이지를 들어가자마자 모든 데이터를 받아오면 사용자는 기다리는 시간이 길어지고 불필요한 데이터까지 불러들이니 데이터 낭비가 발생한다.

PreLoad

페이지를 읽어들일 때 미리 리소스를 받아놓는 기술이다. 모든 데이터를 미리 로드해놓고 대기하는 방식이다.

export default function PreloadPage () {
	const [imgTag, setImgTag] = useState()
	const divRef = useRef(null)

	useEffect(() => {
		const img = new Image()
		img.src = "불러올 이미지 주소를 넣습니다."
		img.onload = () => {
			setImgTag(img)
		}
	}, [])

const onClickPreload = () => {
	if(imgTag) divRef.current?.appendChild(imgTag)
}


return (
	<div>
		<div ref={divRef}></div>
			<button onClick={onClickPreload}> 이미지 프리로드 </button>
	</div>
)
}