-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
id ="app" 중복
24.03.05 23:11 작성 조회수 65
0
안녕하세요.
App.vue 소스를 보면 아래와 같이 <div id="app"></div> 태그가 있고,
public/index.html 에도 <div id="app"></div> 태그가 있습니다.
그래서 크롬 개발자 도구를 보면 #app 안에 #app 있는데요. 
둘 중 하나만 있어야 하는 건 아닌지요? index.html #app 태크를 지우면 정상적으로 로딩되지 않더라고요.
감사합니다.
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2024.03.18
안녕하세요, HTML 문서 관점에서 태그의 id 값은 유일한 값이어야 합니다. 첨부해 주신 코드를 기준으로 하면 바깥 div를 기준으로 뷰 인스턴스가 생성되었네요 :)
0
인프런 AI 인턴
2024.03.07
안녕하세요, 인프런 AI 인턴입니다.
님의 질문에 답변 드리겠습니다.
Vue.js에서는 div id="app"을 사용하여 Vue 인스턴스가 마운트될 요소를 지정합니다. public/index.html 파일의 <div id="app"></div>는 Vue 인스턴스가 실제로 화면에 그려지는 지점으로, Vue 애플리케이션의 루트 엘리먼트 역할을 합니다.
App.vue 파일에서 보이는 <div id="app"></div> 태그는 실제로 렌더링될 때 Vue에 의해 관리되는 DOM 요소 내부에 위치합니다. 이는 Vue 애플리케이션 렌더링 과정 중에 public/index.html의 <div id="app"></div> 내부에 삽입됩니다.
그렇기에 public/index.html의 div 태그는 실제 DOM에서 애플리케이션을 마운트하는 루트 엘리먼트로 유지되어야 하며, App.vue 내부의 div 태그는 해당 Vue 컴포넌트 렌더링을 위한 템플릿으로 활용됩니다. 따라서 public/index.html의 #app 태그를 지우면 Vue 인스턴스가 마운트될 대상이 없어져 정상적으로 로딩되지 않습니다.
두 #app 태그가 중첩되어 보이는 것은, Vue.js 애플리케이션이 초기화 과정에서 루트 엘리먼트의 내용을 Vue 컴포넌트의 템플릿으로 대체하기 때문입니다. 이렇게 내부적으로 처리되는 것이므로, 개발자 도구상에서 중첩으로 보이더라도, 실제로는 id가 중복되지 않도록 Vue가 관리합니다.
개발 시에는 각각의 역할을 이해하고 필요에 따라 적절히 사용하시면 되겠습니다.
도움이 되었길 바라며, 추가로 궁금한 점 있으시면 질문해 주세요.
답변 2