반응형
1. 도입: 세 가지 속성의 공통점과 핵심 질문
- 훅(Hook): 웹 개발에서 특정 요소의 내용을 가져오거나 변경하는 것은 기본 중의 기본입니다. 하지만 이 작업을 위해 textContent, innerText, **innerHTML**이라는 세 가지 선택지가 있다는 것을 알고 계십니까?
- 문제 제기: 셋 다 "텍스트를 다룬다"는 점에서 비슷해 보이지만, 내부 동작 방식, 성능, 그리고 보안 위험도에서는 하늘과 땅 차이입니다. 잘못 사용하면 웹사이트 성능 저하나 심각한 XSS(교차 사이트 스크립팅) 보안 취약점을 유발할 수 있습니다.
- 목표: 이 포스팅에서는 세 속성의 정확한 차이점을 코드 예제와 함께 정리하고, 각 상황에 맞는 최적의 사용법을 제시합니다.
2. 세 가지 속성의 기능 및 동작 원리 분석
각 속성을 정의하고, 브라우저가 어떤 일을 하는지 명확히 설명합니다.
2.1. element.innerHTML (가장 강력하고, 가장 위험한)
- 기능: 요소 내부의 HTML 마크업 전체를 가져오거나 설정합니다.
- 작동 원리: 문자열로 된 HTML을 받아 DOM 노드로 **파싱(Parsing)**하고 기존 내용을 완전히 대체합니다.
- 보안 문제 (필수 강조): 외부에서 입력받은 문자열을 검증 없이 사용하면, 악성 <script> 태그가 삽입될 수 있는 가장 큰 XSS 위험 요소입니다. 마크업 자체가 필요한 경우가 아니라면 사용을 지양해야 합니다.
- 사용처: 사용자에게 마크업이 포함된 템플릿을 동적으로 보여줘야 할 때만 사용하며, 이때도 반드시 **콘텐츠를 철저히 소독(Sanitizing)**해야 합니다.
2.2. element.textContent (가장 빠르고, 가장 안전한)
- 기능: 요소 내부의 모든 텍스트 콘텐츠를 계층 구조에 상관없이 가져오거나 설정합니다. 숨겨진 요소의 텍스트도 포함합니다.
- 작동 원리: HTML 태그를 완전히 무시하고 오직 노드의 텍스트 값만 처리합니다. 브라우저의 **렌더링 과정(Rendering)**을 거치지 않기 때문에 매우 빠릅니다.
- 보안: 텍스트를 설정할 때 HTML 태그는 모두 일반 문자로 취급되어 삽입되므로 가장 안전합니다.
- 사용처: 요소의 순수한 텍스트만 필요할 때 (예: 데이터 수집, 텍스트 비교 등).
2.3. element.innerText (가장 느리고, 렌더링을 고려하는)
- 기능: 사용자에게 "보이는" 텍스트 콘텐츠만 가져오거나 설정합니다.
- 작동 원리 (핵심): innerText는 텍스트를 가져오기 전에 브라우저가 실제로 해당 요소가 화면에 렌더링된 상태인지 확인합니다. 이 과정에는 CSS 스타일(예: display: none;, visibility: hidden;)이 적용되었는지, 줄 바꿈이나 공백이 어떻게 처리되는지 등을 계산하는 레이아웃(Layout) 작업이 포함됩니다.
- 성능 문제: 레이아웃 계산은 브라우저에 큰 부하를 주기 때문에, innerText를 자주 호출하면 성능이 저하될 수 있습니다.
- 사용처: 사용자에게 보이는 그대로의 텍스트가 필요할 때 (예: 클립보드 복사 기능).
3. 비교 요약표 및 코드 예제
세 속성의 차이를 한눈에 비교할 수 있는 표를 제시하고, 숨김 처리된 <style>이나 <script> 태그의 텍스트가 어떻게 다르게 처리되는지 보여주는 예시 코드를 추가합니다.
| 속성 | HTML 태그 처리 | 숨겨진 요소 포함 | 성능 | 보안 위험 |
| innerHTML | 포함 (마크업으로 해석) | 포함 | 보통 (DOM 파싱 비용) | 높음 (XSS 위험) |
| textContent | 무시 (순수 텍스트) | 포함 | 가장 빠름 | 가장 낮음 |
| innerText | 무시 (순수 텍스트) | 제외 (보이는 텍스트만) | 느림 (렌더링 계산 비용) | 낮음 |
Sheets로 내보내기
4. 결론: 최적의 사용 가이드라인
- ✅ 텍스트 설정 시: 무조건 **textContent**를 사용하세요. 가장 빠르고 안전합니다.
- ✅ 텍스트 추출 시: **textContent**가 기본입니다. 페이지의 모든 텍스트(숨겨진 것도 포함)가 필요할 때 사용하세요.
- ⚠️ 렌더링된 텍스트가 필요할 때만: **innerText**를 사용하세요. 단, 성능 저하 가능성을 염두에 두어야 합니다.
- 🚫 마크업 삽입이 필요할 때: innerHTML 대신, **DOM API (document.createElement)**를 사용하여 요소를 직접 생성하고 추가하는 것이 훨씬 안전하고 효율적입니다.
이 주제는 개발자들이 매일 사용하는 기초 기술이지만, 내부 동작 원리를 깊이 있게 이해하게 함으로써 독자의 개발 실력을 한 단계 올려줄 수 있는 좋은 기회가 될 것입니다. 혹시 이 주제에서 더 깊이 다루고 싶은 부분이 있으신가요?
반응형