• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

mounted hook과 api 요청에 대해 질문이 있습니다.

22.01.18 00:57 작성 조회수 481

2

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
 
안녕하세요.
mounted hook과 api 요청에 대해 질문이 있습니다.

수강 강좌 중에서 어느 부분인지는 모르지만

"Vue.js에서 api 요청 시 created hook이나 beforeMount hook에서 api 요청하는 게 좋다. 이유는 mounted가 되고 나서 데이터 요청을 하게 되면, 뷰의 reactivity 특성에 의해 화면이 다시 그려지게 된다" 라고 말씀하셨습니다.

 

(질문 1) 이것의 이유는

=> data, methods 등과 같은 속성이 초기화 및 접근이 가능한 created hook에서 하는 것이 효율적이지 mounted, 즉, 렌더링이 완료된 다음에 api 호출 등으로 인한 data 속성 변경은 updated hook이 실행되어 리-렌더링이 되기 때문이다. 이렇게 이해하면 될까요?

 
수 많은 블로그를 찾아본 결과 created, mounted 의견이 분분했고, 스스로 헷갈리기도 하고 프로젝트를 진행할 때 올바르게 사용하고자 질문드립니다.
(질문 2) 만약, 다음과 같은 상황이면 mounted hook을 이용해도 괜찮을까요?
 
상황 1. mounted hook이 실행됐다는 건 렌더링이 완료되어 DOM에 접근 가능한 것이다. 해당 mounted hook 내에서 api 요청 + 해당 컴포넌트의 DOM에 접근해야 할 상황
 
(질문 3) 만약 위와 같은 상황이 mounted hook을 사용하는 게 옳은 상황이라면 이외에 mounted에서 불가피하게 사용해야 하는 이유가 있을까요?
 
또한, 여러 생각이 들어 적어봅니다. 만약, 자식 컴포넌트에서 mounted hook이 실행되고 그 다음 위에 부모 컴포넌트에서 mounted hook이 순차적으로 실행되는 건 맞다. 하지만 자식 컴포넌트의 mounted hook에서 비동기 api를 호출하고 부모 또한, 비동기 api를 호출한다면 순차적으로(자식 -> 부모) 비동기 api가 실행되는 것은 아니다.
(질문 4) 자식 컴포넌트에서 부모 컴포넌트의 특정 데이터 속성(ex, aaa)을 watch하고 있다면, 이는 부모 컴포넌트의 mounted hook 단계에서 값을 변경 시 인식할 것입니다. 이때 부모 컴포넌트의 mounted hook에서 api 호출 후 응답 시 data 속성 aaa에 변화를 준다면, 자식 컴포넌트 단계에서 이를 watch 할 수 있을 것이고 이럴 때 사용할 수도 있겠네요.???
하지만 생각해보니 부모 컴포넌트 created hook에서 api 호출하고 자식 컴포넌트 측에서 watch 옵션으로 immediate: true를 준다면, 이를 바로 인식할 수도 있고... 헷갈리네요.
 
마지막 질문은 좀 장황하게 작성하였는데 양해 부탁드립니다. 감사합니다.
 
 
course-thumbnail

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

[실습] JobsView와 AskView 구현

강의실 바로가기

답변 1

답변을 작성해보세요.

0

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

장기효(캡틴판교)

지식공유자

2022.01.24

안녕하세요 jaejeongbang님, 답변 드릴게요.

1. updated 훅 관점 보다는 쉽게 생각해서 서버 데이터를 언제 받아올지 모르기 때문에 해당 데이터를 받아오는 동안 컴포넌트를 그리는 행위를 중단할 수 없다는 관점에서 접근하시면 좋을 것 같습니다.

2. DOM에 접근 필요하시면 mounted를 쓰시면 됩니다.

3. 질문에 대한 상황이 구체적이지 않아 답변이 어려울 것 같아요.

4. 말씀하신 mounted와 watch 관계는 맞지 않는 것 같아요.

이 글과 비슷한 Q&A