프로그래밍 공부 노트

태그와 문자열이 함께 저장되어있는 JSON 데이터를 받아와 화면에 출력하려고 했다. HTML 태그와 문자열을 포함하는 json 데이터 컴포넌트에 json 데이터 출력 json 데이터 출력 결과 우리가 상상하는것과 다르게 태그가 문자열 그대로 출력된다. React 공식 문서에 따르면 일반적인 코드에 HTML 코드를 삽입하는것은 Cross-Site Scripting(XSS)에 취약하다고 한다. 사용자가 임의로 웹페이지에 스크립트를 적용할 수 있어 이러한 문제점을 차단하기위해 무조건 텍스트로만 출력되게 설정되어있다고 한다. 그래서 우리가 상상하던데로 출력되지않고 문자열 그대로 태그가 출력 되는것이었다. React 공식 문서에 따르면 DOM에 innerHTML을 사용하려면 즉, 태그를 포함한 문자열 데이터를 태그가 적용되어 출력되게 하기위해서는 대체 방법인 dangerouslySetInnerHTML 을 사용하라고 나와있다. dangerouslySetInnerHTML 속성명을 보면 알 수 있듯이 개발자에게 위험하다는것을 한번더 상기시키기 위해서  dangerously라는 단어가 포함되어있는  dangerouslySetInnerHTML을 사용해서 출력하게 한다는것이다. 사진과 같이 __html을 객체의 키로 전달하고 value값으로 태그가 포함된 문자열 데이터를 전달하면 우리가 상상하던것과 같이 출력된다. dangerouslySetInnerHTML  출력 결과  

innerHTML 많은 사람들이 사용하고있고 나 또한 온라인 강의로 Javascript를 배울 때 모든 강의에서 innerHTML을 사용하고 있었다.  그런데 위 세가지 방법중 가장 추천하지 않는 방법이다. 체감적으로 느낄 수 있을지 모르겠지만 다른 방법들에 비해 파싱이 느리고  잠재적인 보안 위험(XXS 공격)이 발생할 수 있다는 점이다. 보안 문제 참고 https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML#security_considerations textContent innerHTML 보다 성능과 보안에 강점이 있다.  innerHTML의 경우 이름 그대로 HTML을 반환한다. 상황에 따라 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다. 또한 innerHTML에서 언급되었던 잠재적인 보안 위험인 XXS공격의 위험이 없다. innerText textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져온다. 반면에 innerText는 사람이 읽을 수 있는 요소만 처리한다. textContent는 노드의 모든 요소를 반환한다. 그에 비해 innerText는 스타일링을 고려하며, 숨겨진 요소의 텍스트는 반환하지 않는다. 또한, innerText의 CSS 고려로 인해 innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야한다.) Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴한다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능하다. 그러므로 textContent를 사용하도록 하자