| 목차 1. 개요 2. 작동 방식 3. 성능 4. 보안 5. 사용 시나리오 |
1. 개요
insertAdjacentHTML과 innerHTML은 웹 개발에서 DOM 요소를 조작하는 데 사용되는 두 가지 중요한 JavaScript 메서드.
하지만 각 메서드는 작동 방식, 성능, 보안 측면에서 몇 가지 주요 차이점을 가지고 있다.
여기서는 두 메서드의 차이점을 명확하게 비교 분석하여 개발자가 상황에 맞는 적절한 메서드를 선택할 수 있도록 하자.
2. 작동 방식
1) innerHTML
○ 대상 요소의 모든 자식 요소를 제거하고 전달된 HTML 문자열로 완전히 대체
○ 마치 요소 내부를 빈 캔버스처럼 비우고 새로운 그림을 그리는 것과 유사
○ 이미 존재하는 이벤트 리스너, 데이터 속성 등이 모두 삭제
2) insertAdjacentHTML
○ 전달된 HTML 문자열을 대상 요소의 특정 위치에 삽입
○ beforebegin, beforeend, afterbegin, afterend 네 가지 위치 중 하나를 선택하여 삽입할 수 있다
○ 기존 요소 및 이벤트 리스너, 데이터 속성 등은 유지
3. 성능
1) innerHTML
○ 전체 요소를 새로 파싱하고 DOM 트리를 다시 구성하기 때문에 성능이 느릴 수 있다.
○ 특히 요소에 많은 자식 요소가 있거나 자주 변경해야 하는 경우 성능 저하가 심각할 수 있다.
2) insertAdjacentHTML
○ 기존 요소를 유지하고 새로운 HTML을 삽입하기 때문에 innerHTML보다 성능이 우수하다.
○ 특히 자식 요소가 많거나 자주 변경해야 하는 경우 성능 향상 효과가 뚜렷하다.
4. 보안
1) innerHTML
○ 악성 코드를 포함하는 HTML 문자열을 전달하면 XSS 공격의 위험이 높다.
○ 사용자 입력을 직접 innerHTML에 설정하는 경우 반드시 이스케이핑 처리를 수행해야 한다.
2) insertAdjacentHTML
○ innerHTML보다 XSS 공격에 대한 취약성이 낮다.
○ 하지만 여전히 악성 코드를 포함하는 HTML 문자열을 전달하면 공격 가능성이 있다.
○ 사용자 입력을 insertAdjacentHTML에 사용할 때도 주의가 필요하다.
5. 사용 시나리오
1) innerHTML
○ 요소 내용을 간단하게 초기화하거나 전체적으로 변경해야 하는 경우 적합하다.
○ 자식 요소의 구조나 이벤트 리스너가 중요하지 않은 경우 사용 가능하다.
2) insertAdjacentHTML
○ 요소 내 특정 위치에 새로운 콘텐츠를 삽입해야 하는 경우 적합하다.
○ 자식 요소의 구조나 이벤트 리스너를 유지해야 하는 경우 사용 가능하다.
○ 성능이 중요한 경우 innerHTML보다 우선적으로 사용하는 것이 좋다.