문제

• 전에도 백엔드에서 Promise.All을 사용해서 비동기 처리를 해봤지만, 프론트에서 렌더링 작업을 하면서. 되다 말다 되다 말다 이런 상황이 발생을 했다.
• 리액트 컴포넌트에서 componentDidMount에서 2개의 api호출을 하게 된다. 각각의 api에 대해서는 List를 반환을 하게 되고, 이때 반환받은 list들을 인자로 받은 메서드가 호출되면서 연산을 한다.
• 비동기처리이기때문에 어떨때는 되고 어떨때는 하나의 list가 null이여서 이슈가 발생을 했다. 그러다가 전에 사용해본 Promise.All을 사용했다.

componentDidMount() {
  Promise.all([this.fetchSubscriptionInfo(), this.ajaxGetSubTemplate()])
    .then((values) => {
      this.insertSubscibeLogo(values[0], values[1]);
    });
}

• Promise.all([list1, list2])를 인자로 받아서 호출을 한다. 끝나고나서 resolve된 값에는 각각의 인자에 대한 결과가 values의 형태로 저장이 되어있다. 아래처럼 values[0], values[1]을 사용하니 간단하게 해결이 됬다.
• 또한 Promise.all을 사용했을때 계속 undefined가 되었었다. 이유는 비동기처리를 하는 메서드가 호출만하지 return을 안해줬기 때문이 였다. return을 해주니 정상적으로 리턴이 되고 렌더링이 잘됬다.