요약
textContent 중심으로 본 innerHTML, innerText 와의 장단점 비교
| 프로퍼티 | textContent | innerText | innerHTML |
|---|---|---|---|
| 값 | raw text | rendered text | HTML parsed text |
| 성능 | 좋음 | 보통 | 나쁨 |
| 보안 | - | - | 취약 |
textContent
textContent의 값은 식별자 노드의 내부 콘텐츠를 text/plain 으로 파싱(Parsing)한 결과입니다. 즉, 해당 요소 내부의 원시 텍스트(raw text) 입니다. 그래서 다른 프로퍼티들에 비해 파싱이 빠릅니다.
innerText
innerText 프로퍼티의 값 또한 text/plain 으로 파싱한 결과입니다. 그래서 innerText는 textContent와 혼동하기 쉬우나, 중요한 차이점이 있습니다. innerText의 값은 원시 텍스트가 최종적으로 (화면에) 렌더링 된 모습, 예를 들어 내용 숨김이나 줄바꿈 같이 의도적인 스타일링이 들어간 후의 모습이 됩니다.
참고 : Node.innerText | MDN
또한 IE 8 이하에서는 textContent를 지원하지 않았기 때문에, innerText는 태생적으로 IE 엔진에 적합하게 만들어졌던 프로퍼티입니다. 실제로 innerText만 보았을 때 다른 브라우저보다 IE 환경에서 성능이 더 좋습니다.
innerHTML
innerHTML 프로퍼티의 값은 text/html으로 파싱한 결과입니다. 그래서 상대적으로 파싱이 느립니다. (사실 큰 차이는 아닙니다.)
하지만 더 큰 문제는, innerHTML가 대표적인 XSS(Cross-Site Scripting) 공격에 취약한 사례로 언급된다는 점입니다. HTML5에서는 innerHTML과 함께 삽입된 <script> 태그가 실행되지 않도록 지정했지만, 여전히 다른 공격 루트들은 방어하지 못합니다. 그래서 프로젝트가 보안 점검을 거치게 되는 프로젝트인 경우, innerHTML을 사용하면 코드가 거부 될 가능성이 높습니다.
결론
textContent
가급적 textContent를 사용하는 것이 좋습니다. 성능과 보안에 강점이 있고, 결과적으로 해당 노드의 raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문입니다.
innerText
특정 노드에 렌더링 된(화면에 보이는 그대로의) 텍스트를 읽어올 때 유용합니다. 하지만 내부에 특별히 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않습니다. 단, IE(IE8 이하) 환경을 중점으로 고려한 프로젝트라면 textContent 대신 사용하도록 합니다. 😇
innerHTML
HTML Parsing이 필요한 문자열에만 사용하도록 합니다. 그게 아니라면, 성능상 좋지 않고 XSS 공격에도 취약하므로 innerHTML은 사용하지 않는 것이 좋습니다.
참고로, innerHTML을 우회하여 사용하는 방법도 있습니다.
🔗 sanitizeHTML
마치며
타인의 코드를 재활용하는 경우, 그 원작자가 전문가라는 믿음이 전제로 있다 보니 맹목적으로 따라 할 경우가 많았습니다. 하지만 그 코드가 나의 사용 맥락과 다를 수도 있고, 혹은 그 코드가 처음부터 틀린 것일 수도 있습니다. 비록 작동은 잘하더라도, 그 원리를 알고 쓰는 사람과 아닌 사람 간에 차이는 후에 문제가 생길 때 해결할 수 있는 가에서 드러날 것으로 생각합니다. 이번 포스팅과 같이, 비판적으로 코드를 볼 수 있도록 많은 경험을 쌓아 나가야겠습니다.
더 알아보기
정리가 잘 되어있네요~
잘 참고할게요! 감사합니다 :)