React/JSX는 위험한 HTML 구문에 대해 자동으로 이스케이프를 적용한다. 이것은 보안 측면에서는 매우 편리하다. (기본적으로 제공되는 보안이 훌륭하다!) 특수문자를 노출하려면 다음 방법 중 하나를 선택할 수 있다.

• 배열로 출력해서 여러 개의 문자열로 분리할 수 있다. 예를 들어 <span>{[<span>&copy;&mdash;&ldquo;</span>]}</span>처럼 작성한다. 배열 안의 엘리먼트에 key="specialChars"와 같이 key 속성을 작성하면 콘솔에 표시되는 경고를 없앨 수 있다.

• 소스 코드에 특수문자를 직접 복사해서 넣는다(이때는 반드시 UTF-8 문자셋을 사용해야 한다).

• 특수문자를 \u로 시작하는 이스케이프 시퀀스로 바꾼 후에 유니코드 번호를 찾아 사용한다(유니코드 번호가 잘 기억나지 않는다면 www.fileformat.info/info/unicode/char/search.htm에서 찾을 수 있다. 기억하는 사람이 있을지는 모르겠지만).

• String.fromCharCode(charCodeNumber)를 이용해서 유니코드 번호에서 문자로 변경한다.

• React 엘리먼트의 __html에 dangerouslySetInnerHTML을 이용하는 방법도 있으나 추천하지 않는다(http://mng.bz/TplO).

 

마지막 방법을 사용한 경우는 다음과 같다(이 방법은 다른 방법이 모두 실패했을 때 선택할 수 있다. 타이타닉이 침몰하면 보트를 향해 달리는 수밖에 없다!)

var specialChars = {__html: '©—“'}
<span dangerouslySetInnerHTML={specialChars}/>

 

속성 이름을 dangerouslySetInnerHTML이라고 지은 것을 보면 React 팀은 확실히 유머 감각이 있다. 가끔씩 이렇게 React에 있는 이름들 덕분에 웃곤 한다.¹²