JavaScript innerHTML 사용의 단점
JavaScript에서 innerHTML 속성은 HTML 요소의 내용을 손쉽게 조작할 수 있는 편리한 도구이지만, 성능과 안정성 측면에서 몇 가지 중요한 단점이 있습니다.
1. 전체 재파싱으로 인한 성능 저하
innerHTML은 기존 내용을 다시 파싱(reparse)하지 않고는 새로운 요소를 추가(append)할 수 없습니다. innerHTML 값을 변경하면 브라우저는 해당 요소의 모든 자식 노드를 제거한 뒤, 전체 HTML 문자열을 새로 파싱하여 DOM을 다시 구성합니다. 이로 인해 innerHTML을 직접 수정하는 작업은 매우 느려질 수 있습니다.
예를 들어, 특정 태그에 새로운 요소를 추가하려면 다음과 같이 작성해야 합니다.
let myDiv = document.querySelector('#myDiv')
// myDiv 태그 전체를 다시 파싱합니다.
myDiv.innerHTML += '<p>Added new tag</p>'위 코드에서 += 연산자를 사용하면 기존 내용 전체를 문자열로 읽어온 뒤 새 내용을 덧붙이고, 다시 전체를 파싱하게 됩니다. 따라서 요소가 많거나 반복 작업이 빈번할수록 성능 저하가 더욱 심해집니다.
2. 유효성 검사 부재
innerHTML은 삽입되는 HTML 문자열에 대한 유효성 검사를 제공하지 않습니다. 따라서 잘못 작성된(broken) HTML이 그대로 문서에 삽입될 수 있으며, 이로 인해 DOM 구조가 의도치 않게 깨지거나 페이지 레이아웃이 무너질 위험이 있습니다.
innerHTML의 대안
이러한 단점을 피하고 싶다면 상황에 맞는 다음 방법들을 고려해 볼 수 있습니다.
- createElement / appendChild: 새 요소를 생성해 DOM에 직접 추가하므로 기존 내용을 다시 파싱하지 않아 성능 면에서 유리합니다.
- insertAdjacentHTML: 전체를 재파싱하지 않고 특정 위치에만 HTML을 삽입할 수 있습니다.
- textContent: 순수 텍스트만 다룰 때는 textContent를 사용하는 것이 더 안전하고 빠릅니다.
결론적으로 innerHTML은 간단한 일회성 작업에는 유용하지만, 반복적인 DOM 조작이나 사용자 입력을 다루는 경우에는 위와 같은 대안을 사용하는 것이 바람직합니다.