• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

asyncData vs fetch 문의 드립니다.

21.09.05 12:57 작성 조회수 398

1

asyncData 와 fetch 는 비슷한 기능 같아 보이는데, 왜 2개가 있는지 혼란 스럽습니다.
1) asyncData 가 pages 내의 컴포넌트만 가능한 이유가 무엇일까요 ?
pages 컴포넌트는 특별한 무엇이 있는 듯 해서요.
2) 혹시 모든 걸 fetch 로만 가능한 건 아닐까요 ? asyncData 로만 가능한 기능이 어떤 걸까요 ?
본 강의에서 예시를 들어줄 수 있는지요 ?
3) 둘 중 어느 하나로만 안되고, 혼란스럽게 두 개로 분리한 중요한 촛점이 있을 듯 한데요. 그게 무엇일까요 ?
실제 직접 사용할려면, 많이 혼동할 거 같습니다...
course-thumbnail

Nuxt.js 시작하기

fetch 속성이 필요한 이유

강의실 바로가기

답변 3

·

답변을 작성해보세요.

1

고혜정님의 프로필

고혜정

질문자

2021.09.06

답변 감사합니다. 선생님.

답변 주신 내용은 강의에 있는 내용이라 그걸 들어도 이해가 안되서요...

혹시 제 질문 (1), (2), (3) 에 답변을 달아 주시면 제가 좀 더 잘 이해할 수 있을 거 같습니다만.

장기효(캡틴판교)님의 프로필

장기효(캡틴판교)

지식공유자

2021.09.09

안녕하세요 혜정님, 1,2,3번에 대해 전반적으로 친절하게 설명한다고 했는데 이해가 잘 안되셨나 보네요..! 말씀해 주신 대로 답변 드릴게요.

1) asyncData 가 pages 내의 컴포넌트만 가능한 이유가 무엇일까요 ?
pages 컴포넌트는 특별한 무엇이 있는 듯 해서요.
답변) 이건 프레임워크를 제작한 사람의 의도가 asyncData의 사용 용도를 그렇게 정해서 그렇습니다. asyncData의 내부적인 동작에 대해서는 이전 답변 참고하시면 됩니다.
 
2) 혹시 모든 걸 fetch 로만 가능한 건 아닐까요 ? asyncData 로만 가능한 기능이 어떤 걸까요 ?
본 강의에서 예시를 들어줄 수 있는지요 ?
답변) asyncData는 말씀 드린 것처럼 페이지를 진입 시킬지의 여부를 결정할 수 있습니다. 현재 강의 기준에서는 특정 데이터가 없으면 페이지에 진입하면 안돼 라는 시나리오가 없기 때문에 지금은 asyncData나 fetch 어느 한 쪽으로도 모두 구현하셔도 상관 없습니다.
 
3) 둘 중 어느 하나로만 안되고, 혼란스럽게 두 개로 분리한 중요한 촛점이 있을 듯 한데요. 그게 무엇일까요 ?
답변) 이 내용은 이미 이전 답변들에서 충분히 설명 드린 것 같아요..! :)
 

0

고혜정님의 프로필

고혜정

질문자

2021.09.10

자세한 답변 감사합니다.

박굿뜨님의 프로필

박굿뜨

2021.10.03

asyncData는 return한걸 data 처럼 template에서 접근가능하다는 점도 fetch와 다르게 활용될 수 있지않을까 생각하고 있습니다!

개인적인 생각으로는 fetch는 vuex에 데이터를 셋팅하는 느낌, asyncData는 vuex와 관련없는 데이터를 셋팅하는 느낌이지 않을까요?

 

0

장기효(캡틴판교)님의 프로필

장기효(캡틴판교)

지식공유자

2021.09.05

안녕하세요 혜정님, 좋은 질문 주셨네요 :) fetch와 asyncData의 가장 큰 차이점은 페이지의 진입을 허용/금지 한다는 측면인 것 같아요. asyncData는 페이지 진입 여부를 결정하는 데이터 호출 속성입니다. 반면에 fetch는 페이지 진입 여부에 크게 관계가 없습니다.

강의에서 안내드린 것처럼 뷰 라우터의 beforeEnter() 속성에서 next()를 호출하느냐의 차이 정도로 이해하시면 좋을 것 같아요(해당 부분은 Vue.js 완벽가이드에 안내되어 있습니다)

그리고 컴포넌트의 created() 속성에서 데이터를 호출했을 때의 페이지 로딩 UI와 페이지에 진입하기 전의 라우터 네비게이션 가드에 데이터를 설정하고 페이지에 진입하는 로딩 UI에 대한 차이점 또한 완벽 가이드에 안내되어 있으니 해당 부분 참고해 보시면 좋을 것 같습니다 :)

서버의 데이터를 받아온다는 측면에서는 두 속성 동일한 목적을 가지고 있고 위에서 말씀 드린 약간의 차이점과 API에서 제공되는 옵션들의 세부적인 차이가 있을 것 같아요. 더 자세한 내용은 아래 링크 참고해 보시면 좋을 것 같습니다 :)

https://stackoverflow.com/questions/49251437/difference-between-asyncdata-vs-fetch

이 글과 비슷한 Q&A