ReactㅣReact&JSX의 조심해야할 부분

React를 사용하면 JSX 활용은 거의 필수와 같은데, 이를 위해 조심하고 알아야할 부분 몇 가지를 서술하고자 한다.

예를 들면, JSX는 자식 엘리먼트가 없거나 단일 태그를 사용할 때는 태그를 닫을 때 반드시 슬래시(/)를 넣어야 한다.

<a href="www.velog.com">thanks<a>

위는 잘못된 코드이다. 뒤에 있는 a는 < /a>가 와야한다.

다만, HTML은 조금 관대하다. HTML은 뒤에 슬래시가 없어도 정상적으로 렌더링한다.

이제 본격적으로 몇 가지를 말해보겠다.

특수문자

HTML 엔티티 코드를 사용하면 저작권 표시, 말바꿈표, 다옴표 등의 특수문자를 표시할 수 있다.

• & copy;
• & mdash;
• & ldquo;

위와 같이 말이다.

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

<span>& copy;& mdash; & ldquo;</span>

하지만 만약에 HTML 엔티티 코드를 변수나 속성을 사용해서 < span>에 동적으로 출력하려고 한다면, 특수문자가 아닌 원래 문자 그대로가 출력된다.
예를 들면 아래와 같다.

var data = '& copy;& mdash; & ldquo;'

<span>{data}</span>

React&JSX는 이러한 구문에 대해 자동으로 이스케이프를 적용한다. 이는 보안 측면에서 매우 편리하다.
특수문자를 노출하기 위해서 아래와 같은 방법이 있다.

• 배열로 출력해 여러 개의 문자열로 분리할 수 있다. (ex)< span>{[< span>& copy;& mdash; & ldquo< /span>]}< /span> 배열 안의 엘리먼트에 key 속성을 작성하면 콘솔에 표시ㅣ되는 경고도 없앨 수 있다.

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

• 특수문자를 \u로 시작하는 이스케이프 시퀀스로 바꾼 후에 유니코드 번호를 찾아 사용하기.
  
  * String.fromCharCode(charCodeNumber)를 이용해 유니코드 번호에서 문자로 변경하기

data - 속성

위에 말한 부분과 비슷하다.
HTML에 사용자 정의 속성을 생산하는 방법을 보면, 우선 React는 HTML 비표준 속성을 컴포넌트에 추가하면 무시한다. 말했듯 React의 동작 원리이기 때문이다.

하지만 DOM 노드에 추가 데이터를 전달해야 하는 경우가 생긴다. 이 경우에는 안티패턴이 되지만, 어쩔 수 없이 사용자 정의 속성을 렌더링해야 한다면 속성의 접두사로 data-를 사용한다.

<li data-velog-id="thanks">~~~</li>

위와 같이 하면 사용자 정의 속성인 data-velog-id를 사용했으므로 React가 뷰에 렌더링한다. 하지만 velog-id 앞에 data- 부분이 없다면 렌더링하지 않는다.

스타일 속성

JSX의 스타일 속성은 일반적인 HTML과는 다르게 동작한다.
JSX에서는 문자열 대신 자바스크립트 객체를 전달하고, CSS 속성은 카멜 표기법으로 작성한다.

• font-size는 fontSize, blackground-image는 backgroundImage, 이런식이다.

자바스크립트 객체를 변수에 저장하거나 중괄호를 이중으로 작성하여 인라인으로 작성할 수도 있다. 이 이중괄호는 바깥쪽의 중괄호는 JSX에서 사용되고, 안쪽의 중괄호는 자바스크립트의 객체 리터럴을 작성하기 위해 사용된다.

아래와 같은 폰트 크기를 가진 객체가 있다고 하면,

ley myFontSize = {fontSize : '3pt'}

JSX에서는 myFontSize 객체를 스타일 속성에 넘겨줄 수 있다.

<input style={myFontSize}/>

또한, 변수를 선언하지 않고 아래와 같이 바로 직접 넘겨줄 수도 있다.

<input style={{fontSize : '3pt'}}

그리고 축해서 문자열로 작성할 수도 있다.

<span style={{border: '3px blue solid'}}>thanks</span>

위와 같이 말이다.

class와 for 속성

사실 React와 JSX는 class와 for를 제외하면 표준 HTML 속성을 모두 사용 가능하다. 하지만 class와 for은 자바스크립트와 ECMAScript의 예약어이고, JSX는 일반 자바스크립트로 변환해서 사용한다. 그래서 class와 for 대신에, clasName, htmlFor를 사용한다.
예를 들면 아래와 같다.

<div>
	<input type="radio" name={this.props.name} id={this.props.id} />
    <label htmlFor={this.props.id}>
    	{this.props.label}
    </label>
</div>

<div className="hidden">~~~</div>

bool 값을 속성 값으로 사용하는 경우

disabled, required, checked, autofocus, readOnly 같은 일부 속성은 폼 요소에만 사용한다. 여기서 중요한 것은, 속성 값을 {}안에 반드시 자바스크립트 식으로 작성해야 한다는 것이다. 문자열로 입력하면 안된다!
예를 들면 아래와 같다.

<input disabled={false} />

false를 문자열로 작성하면 안된다. 이유는 이 값이 참 값인지 확인할 때 공백이 아닌 문자열은 자바스크립트에서 참 값이기 때문이다. 문자열로 false라고 입력하면 input 요소에 disabled 속성은 true로 적용된다.

※ 자바스크립트와 Node.js에서 참 값은 Boolean으로 평가될 때 true로 변환된다.
거짓인 값은 6가지가 있다.

• false
• 0
• ""(공백 문자열)
• null
• Undefined
• NaN

만약 속성 값을 아래와 같이 생략하면 React는 생략된 값을 true로 판단한다.

<input disabled />