-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
하위 컴포넌트 호출 시 asyncData 사용 가능 여부 문의
22.02.03 10:01 작성 조회수 178
1
캡틴판교님 안녕하세요. 강의 잘 들었습니다.
강의를 듣고 제 프로젝트에 적용 중인게 있는데요.
부모 컴포넌트에서
대시보드에 넣을 차트나 다른 하위 컴포넌트들을 생성 후
한번의 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 com1Data = {}
let Series = []
const com3Data = {}
// 컴포넌트1 상태 값 반영
com1Data.product = result.product
Series = []
Series.push(result.status.count1)
Series.push(result.status.count2)
// 컴포넌트3 상태 값 반영
this.com3Data = result.fault.data
return { result, com1Data, Series, com3Data }
},
하지만 이 방법이 맞는 방식인지 모르겠습니다.
이 방식이 맞는걸까요? 혹시 다른 좋은 방법이 있다면 코멘트 한번 부탁드립니다.
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2022.02.05
안녕하세요 hjp0712님, 첨부해주신 코드가 잘 안보이네요 ㅜㅜ VSCode로 들고가서 코드 보니까 await랑 then을 혼용하시는 것 같은데 요 부분 정리가 필요해 보입니다. 아래 글 각각 참고해서 다시 코드 작성해 보시겠어요? :)
https://joshua1988.github.io/web-development/javascript/js-async-await/
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
답변 1