3.4.1 특수문자

HTML 엔터티 코드(entity code)를 사용하여 다음 예제 코드처럼 저작권 표시나 말바꿈표, 따옴표 등 특수문자를 표시한다.

©
—
“

 

이 코드는 <span>이나 <input> 문자열 속성에 렌더링할 수 있다. 예를 들어 다음은 변수나 속성 없이 텍스트만 작성한 정적인 JSX이다.

<span>&copy;&mdash;&ldquo;</span>
<input value="&copy;&mdash;&ldquo;"/>

 

그렇지만 만약 HTML 엔터티 코드를 변수나 속성을 사용해서 <span>에 동적으로 출력하려고 한다면, 특수문자 대신 원래 문자 그대로(&copy;&mdash;&ldquo;) 출력된다. 따라서 다음 코드는 제대로 작동하지 않는다.

// 제대로 작동하지 않는 안티패턴이다!
var specialChars = '©—“'
 
<span>{specialChars}</span>
<input value={specialChars}/>