this.template 메소드

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

4. Header 개발

해결된 질문

작성

수정됨

this.template 메소드를 innerHTML에 할당하는 방식이 아닌 createElement와 appendChild 등으로 해결해도 괜찮나요?

이렇게 하면 변경되지 않은 부분만 체크하여 필요한 부분만 DOM을 다시 추가하는 방식을 사용할 수 있을 것 같은데

답변 1

지식공유자

안녕하세요 🙂

createElement와 appendChild를 사용해 코드를 작성할 수도 있습니다.
하지만 innerHTML과는 다음과 같은 차이점이 있습니다.

innerHTML
innerHTML을 사용하면, 전체 HTML을 한 번에 정의할 수 있으므로 코드가 간단하고 읽기 쉽고, 작은 프로젝트나 변경이 자주 일어나지 않는 경우 innerHTML을 사용해 빠르게 결과를 얻을 수 있습니다.

createElement, appendChild
조건문을 활용해 필요한 부분만 DOM에 반영할 수 있지만, 코드가 매우 복잡해지고 길어지며 직관적으로 코드를 작성하기 어렵습니다.

강의에서 개발하는 프로젝트는 크기가 작은 프로젝트이기 때문에, 보다 깔끔하고 직관적인 코드를 위해 innerHTML을 사용해 개발했습니다.

목적에 따라 알맞게 사용하시면 될 것 같습니다! 감사합니다.

질문자

createElement, appendChild 등의 DOM API를 사용하게 되면 변경되지 않은 부분도 다시 렌더링 된다는 말씀이신가요?

잘 이해가 안되어서..

지식공유자

제가 애매하게 답변을 드린것 같아, 답변을 조금 더 구체적으로 다시 작성해드렸습니다.

수정된 답변을 다시 확인 부탁드립니다 :) 감사합니다.

질문자

답변 감사합니다

인프런 커뮤니티 질문&답변