안녕하세요. 엔지엠소프트웨어입니다. 기존에 만들어두었던 컴포넌트를 테스트하다가 동작에 이상한점이 발견되었습니다. 멀티로 선택할 수 있는 Select 콘트롤 목록을 순차적으로 Option 항목을 채우는데요. 이 때 forEach로 각각의 Select 콘트롤을 동적으로 만들면서 서버로부터 Option 목록을 가져오게 했습니다. 그런데, 일부 Select 콘트롤이 채워지지 않는 문제가 있었습니다. 디버깅해보면 서버로부터 데이타는 정상적으로 가져왔네요. 

React+Typescript 개발 환경에서 Backend로부터 데이타를 가져올 때 async fetch를 사용합니다. 이 때 forEach는 비동기 호출을 기다리지 않고 무조건 반복한다는걸 알게 되었습니다. 그래서, for ~ of로 변경했는데요. 이렇게하니 정상적으로 잘 동작했습니다. 문제는 forEach는 패러럴하게 반복하기 때문에 속도가 괜찮은데 반해 for ~ of는 backend로부터 데이타를 가져와서 바인딩할 때까지 넘어가지 않습니다. 대용량 데이타라면 로직을 다시 만들어야 할거 같긴한데... 많지 않은 데이타라서 이정도도 괜찮은거 같네요^^

// 기존 문제가 되었던 코드!
// depths.forEach(async (d: any, i: number) => {
// 정상 동작하는 코드!
for (const d of depths) {

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~