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

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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를 준다면, 이를 바로 인식할 수도 있고... 헷갈리네요. 마지막 질문은 좀 장황하게 작성하였는데 양해 부탁드립니다. 감사합니다.

캡틴판교 · Answer

안녕하세요 jaejeongbang님, 답변 드릴게요. 1. updated 훅 관점 보다는 쉽게 생각해서 서버 데이터를 언제 받아올지 모르기 때문에 해당 데이터를 받아오는 동안 컴포넌트를 그리는 행위를 중단할 수 없다는 관점에서 접근하시면 좋을 것 같습니다. 2. DOM에 접근 필요하시면 mounted를 쓰시면 됩니다. 3. 질문에 대한 상황이 구체적이지 않아 답변이 어려울 것 같아요. 4. 말씀하신 mounted와 watch 관계는 맞지 않는 것 같아요.