[TIL] 구조분해와 Recoil,그리고 map(),Promise.all

구조분해 할당 :키워드로 별칭 지정 가능

 

{data: videos} = something

 

 

recoil 사용법

// 기본 세팅 이후

//해당 atom 불러옴 그 후 훅에 넣음

import { videoListState } from '@/atoms/videoListState';

const [videos, setVideos] = useRecoilState(videoListState);//조회 수정
const v = useRecoilValue(videoListState); // 조회

//혹은 selector 훅을 활용해 기존 atom에서 파생된 데이터를 사용할 수 있음

 

 

프로미스를 반환하는 여러개의 콜백함수를 다룰땐 Promise.all을 사용한다.

문제

//코파일럿의 추천 코드
	const videoLists = await Promise.all(
        keywords.map(async (keyword) => {
            const { videos: videoList }: { videos: Ivideo[] } =
                await youtube.search(keyword);
            return videoList;
        })
    );

Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다. - MDN

 

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

즉 Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후 전체에 대한 프로미스를 반환하는데 

map()은 프로미스의 반환이 아닌 호출의 결과를 반환한다.

 

해결

위와같은 의문점에서 위 코드를 아래와 같이 수정했다.

const videoLists = await Promise.all(
        keywords.map((keyword) => youtube.search(keyword))
    );

그러니 잘 작동 했다.

알다시피 화살표 함수 축약표현은 리턴을 암시한다. 

(param1, param2, …, paramN) => expression
    // 다음과 동일함:  => { return expression; }

그러므로 youtube.search(keyword) 가 반환한 프로미스들이 배열에 담기게 되고 

await Promise.all은 모든 프로미스들이 resolve에 도달하면 결과를 취합하여 반환한다.

 

결론

 

• 문제 단락의 첫 코드는 의미없는 Promise.all을 사용한 코드가 된다.
• 코파일럿은 참고만 하자
• 에러 핸들링을 잘하자