React - JSX

트랜스파일(브라우저나 서버가 코드를 해석할 수 있도록 Javascript로 변환) 을 거치면 XML은 리액트 라이브러리에 대한 함수 호출로 변환됩니다.

<h1> Hello World</h1> 와 같은 코드는 React.createElement("h1", null, "Hello World"); 로 변환됩니다.

태그 특성은 낙타 표기법 으로 작성한다.

예를 들어, HTML에서 input 태그의 maxlength를 사용하고 싶다면, 다음과 같이 JSX에서는 대문자(“L”)로 작성해야 합니다.

// HTML
<input type="text" maxlength="30" />

// JSX
return <input type="text" maxLength="30" />

모든 요소는 짝이 맞아야 한다.

JSX는 XML이므로 모든 요소의 짝이 맞아야 합니다. <br> 및 <img> 같이 종료 태그가 없는 태그는 <br/>, <img src=”…”/> 처럼 작성해야 합니다.

단일 루트 노드

리액트 컴포넌트는 단일 루트 노드만 렌더링할 수 있습니다. 따라서 다음과 같은 코드는 유호하지 않습니다.

return (
    <h1>Hello World</h1>
    <h2>Have a nice day</h2>
)

정확히 말하면 이것은 JSX의 제한이 아니라 자바스크립트의 특징입니다. return문은 단일 값만 반환할 수 있지만, 이 코드는 두 개의 문을 반환려하고 합니다(React.createElement를 두 번 호출). 이는 다음과 같이 반환 값을 루트 객체 하나에 래핑해서 해결할 수 있습니다.

return (
    <div>
        <h1>Hello World</h1>
        <h2>Have a nice day</h2>
    </div>
)

// 트랜스파일 결과
return React.createElement("div", null,
    React.createElement("h1", null, "Hello World"),
    React.createElement("h2", null, "Have a nice day")
)

조건 절

if문은 JSX와는 잘 어울리지 않지만 이는 JSX의 제한이 아니라 JSX가 사실은 일반 자바스크립트이기 때문입니다.

다음과 같은 JSX가 있다고 가정해봅시다.

return (
    <div className="salutation">Hello JSX</div>
)

이 코드는 다음과 같이 정상적인 자바스크립트 코드로 변환된다.

return (
    React.createElement("div", {className: "salutation"}, "Hello JSX");
)

그런데 다음과 같이 JSX 중간에 if절을 넣었다고 가정해봅시다.

<div className={if (condition) { "salutation" }}>Hello JSX</div>

이 코드는 다음과 같이 잘못된 자바스크립트 식으로 변환됩니다.

React.createElement("div", {className: if(condition) { "salutation"}}, "Hello JSX");

이를 해결하기 위해 조건을 밖으로 이동하는 방법이 있습니다.

render() {
    let className;
    if (condition) {
        className = "salutation";
    }
    return (
        <div className={className}>Hello JSX</div>
    )
}

리액트는 정의되지 않은 값을 처리하는 방법을 이해하며, 조건이 false일 경우 div 태그 안에 클래스 특성을 생성하지 않습니다.