created()란?

이것도 mounted() 처럼 Vue 컴포넌트의 라이프사이클 훅 중 하나이다.

이 친구는 DOM에 아직 접근할 수 없지만, 컴포넌트의 데이터와 메서드에 접근할 수 있다.

 

created() 단계에서는 DOM이 완전히 준비되지 않았기 때문에

document.getElementById 같은 방식으로 DOM에 접근하는 것은 불가능하다.

마치 눈 감고 아무것도 안 보이는 상태에서 무언가 찾으려는 것처럼 말이다..

 

왜 쓰는건가?

이 단계에서는 컴포넌트의 데이터를 초기화하거나, API를 호출해서 데이터를 가져오는 등의 작업이 가능하다.

 

mounted()와의 차이점은 created()는 컴포넌트가 생성되었을 때 바로 실행되고, mounted()는 컴포넌트가 DOM에 실제로 마운트된 후에 실행된다.

그러니까 created()는 컴포넌트의 내부 설정을, mounted()는 외부와의 상호작용을 처리한다고 생각하면 된다.