하위 컴포넌트 호출 시 asyncData 사용 가능 여부 문의

Question

캡틴판교님 안녕하세요. 강의 잘 들었습니다. 강의를 듣고 제 프로젝트에 적용 중인게 있는데요. 부모 컴포넌트에서 대시보드에 넣을 차트나 다른 하위 컴포넌트들을 생성 후 한번의 axios get api 호출을 통해 데이터를 각각 하위 컴포넌트의 props로 던졌는데요. 아래와 같은 방식으로 컴포넌트의 값을 입력하고 Props로 하위 컴포넌트에 값을 바인딩하니 await axios . get ( ' /server/api ' ) . then ( ( ret ) => { let result = ret . data . data // 1번 하위 컴포넌트 값 반영 this.com1Data.product = result.product // 2번 차트 컴포넌트 값 반영 let arr=[] arr.push(result.status.count1) arr.push(result.status.count2) arr.push(result.status.count3) arr.push(result.status.count4) this.series = arr; // 3번 하위 컴포넌트 값 반영 this.com3Data = result.fault.data //4번 하위 컴포넌트 값 반영 ... }) 3개정도 컴포넌트 값 바인딩까지는 문제 없이 잘 뜨는데, 4개 이상 컴포넌트에 값 바인딩 추가 후 화면을 띄우니 값이 모두 바인딩 되지 않았습니다. 혹시 비동기문제인가 해서 promise로 묶어서 반영도 해봤는데 여전히 작동을 안해서 asyncData를 사용하여 먼저 api 호출을 한 후 데이터를 미리 불러왔더니 잘 뜹니다. 제 생각엔 아마도 생명주기에 따른 문제점이 아닌가 합니다. async asyncData () { const response = await axios . get ( ' /server/api ' ) const result = response . data . data const com1 Data = {} let Series = [] const com3 Data = {} // 컴포넌트1 상태 값 반영 com1 Data . product = result . product // 컴포넌트2 상태 값 반영 Series = [] S eries . push ( result.status . count1 ) Series . push ( result.status . count2 ) // 컴포넌트3 상태 값 반영 this.com3Data = result.fault.data return { result , com1 Data , Series , com3 Data } }, 하지만 이 방법이 맞는 방식인지 모르겠습니다. 이 방식이 맞는걸까요? 혹시 다른 좋은 방법이 있다면 코멘트 한번 부탁드립니다.

캡틴판교 · Answer

안녕하세요 hjp0712님, 첨부해주신 코드가 잘 안보이네요 ㅜㅜ VSCode로 들고가서 코드 보니까 await랑 then을 혼용하시는 것 같은데 요 부분 정리가 필요해 보입니다. 아래 글 각각 참고해서 다시 코드 작성해 보시겠어요? :) https://joshua1988.github.io/web-development/javascript/js-async-await/ https://joshua1988.github.io/web-development/javascript/promise-for-beginners/