[React] ESLint - Unexpected `await` inside a loop(no-await-in-loop) error

문제 발생

Redux toolket에서 예시로 아래와 같은 코드를 작성했다.

const target = [1,2,3]

export const fetchDataCombine = createAsyncThunk(
  'project/test',
  async (target) => {
  const response = []
    // eslint-disable-next-line no-restricted-syntax
    for (const data of target) {
      const url = `http://localhost:3000/?target=${data}`;
      response.push(await axios.get(url));
    }
    return response;
  }
);

// error

for..of 문 내부에서 'await'을 작성하고 실행하면 다음과 같은 error가 발생한다.

Unexpected `await` inside a loop  no-await-in-loop

 

 

해결 과정

위와 같은 코드는 ESLint공식문서를 확인하면 await에 이점을 충분히 활용하지 못하는 코드라고 말하고 있다.

for..of 문으로 순서대로 작성하는 것과 await을 사용하여 동기적으로 실행하는 것에 차이가 없다고 생각할 수도 있지만 성능 차이가 심하게 있다고 한다. 마침 테스트를 하신 분의 블로그를 참고했다.

 

for..of 에서 await을 사용하면

for문이 실행 -> await -> for문이 실행 -> awiat

 

 'Promise.all' 을 사용해서 해결했다.

Promise.All : 모든 promise가 이행될 때까지 기다렸다가 그 결과 값을 담은 배열을 반환하는 메서드 

 

Promise.all 사용

for문이 실행 -> for문이 실행 -> 모든 프로미스가 해결될 때가지 대기

 

해결

const target = [1,2,3]

export const fetchDataCombine = createAsyncThunk(
  'project/test',
  async (target) => {
  const promise = []
    // eslint-disable-next-line no-restricted-syntax
    for (const data of target) {
      const url = `http://localhost:3000/?target=${data}`;
      promise.push(axios.get(url));
    }
    const results = Promise.all(promise)
    return results;
  }
);

// (3) [{…}, {…}, {…}]