TIL - 20220622 (부제: Promise로 요청 한 번에 하기)

 코드숨 리액트 과제를 진행하며 다른 분들이 작성한 코드와 리뷰를 보던 중 다음과 같은 리뷰를 보게 됐다.

코드를 보면 fetchRegions()를 데이터를 불러와 regions에 저장하고 regions를 setRegions에 담아 액션을 dispatch한 다음에 fetchCategories()를 진행하며 과정을 반복한다. regions와 category는 아무런 연관이 없기 때문에, 동시에 요청하면 더 빠를 수 있지 않을까? Promise를 통해 regions와 category를 동시에 요청할 수 있다! 

Promise를 통해 위와 같이 작성해준 다음 React Developer Tools로 속도 측정을 해보니 과거의 코드는 Regions를 불러온 다음 Categories 불러오기까지 2초가 걸렸고 Promise로 불러오면 1.2초 밖에 걸리지 않아 시간이 단축됐다. 다만 조심해야 하는 부분은 있다. 동시에 요청한다고 해서 모든 요청을 Promise로 묶어버리면 시간이 적게 걸리는 요청과 시간이 상당히 오래 걸리는 요청이 있을 때 시간이 적게 걸리는 요청이 이미 끝났어도 시간이 상당히 오래 걸리는 요청이 끌날 때까지 기다려야 한다. 앞으로 시간이 오래 걸리지 않는 요청은 위와 같이 Promise로 묶어주면서 시간이 오래 걸리는 요청은 Promise로 묶는 실수를 범하지 말아야겠다.