강의 내용중 이해가 가지 않는 부분이 있습니다.

Question

5:50 부분을 보시면, 말씀하실 때 1) App.vue에 header,input,list,footer등의 컴포넌트가 등록 되어있고 2) App.vue는 main.js의 뷰 인스턴스에 등록이 되어있다 하셨는데 3) 따라서 TodoInput에 있는 this는 현재의 TodoInput.vue 컴포넌트를 가리킨다 라고 하셨는데요. 2번과 3번 각각은 이해가 되는데, 둘의 연관성이 이해가 되지 않습니다. 결국 한개의 App.vue 인스턴스에 등록되어있다면 해당 this는 App.vue를 가리켜야하는 것 아닌가요? 왜 TodoInput을 가리키게 되는건가요?? 뷰파일이 분리되면 this도 분리되서 해당 컴포넌트를 가리키게 되는건가요? 아니면 전역에서 newTodoItem을 선언한 파일은 TodoItem밖에 없으니 전역에 있는 data()를 들고온건가요?

캡틴판교 · Answer

안녕하세요 예란님, 좋은 질문입니다 :) 바로 답변드릴게요. Q) 왜 TodoInput.vue 에서의 this가 App.vue를 가리키지 않는가? 뷰로 웹 애플리케이션을 만들게 되면 최소 2개 이상의 컴포넌트를 사용하시게 될 겁니다. 물론 1개로 할 수도 있지만 그건 컴포넌트 기반 프레임워크의 장점을 잘 활용하지 못하는 것이기 때문에 여러 개의 컴포넌트로 애플리케이션을 구성한다고 보시면 됩니다. 그랬을 때 각각의 컴포넌트를 가리킬 수 있어야 하는데 그게 각 .vue 파일에서 `this` 라는 키워드로 접근하실 수 있습니다.  정리하면, App.vue의 this는 App 컴포넌트를 TodoInput.vue의 this는 TodoInput 컴포넌트를 가리킵니다 :)

김예란 · Answer

아하, 각 vue파일에서의 this 키워드는 각 vue에서 생성한 컴포넌트를 가리키는거군요!! 명확한 답변 정말 감사합니다. 궁금증이 풀렸습니다:-D!!