JavaScript의 React 프레임워크에서 JSX 구문을 배우기 위한 입문 튜토리얼_기본 지식

JSX란 무엇인가요?

React로 컴포넌트를 작성할 때 일반적으로 JSX 구문이 사용됩니다. 얼핏 보면 XML 태그가 Javascript 코드로 직접 작성된 것처럼 보이지만 실제로는 모든 XML 태그가 JSX 변환 도구입니다. 물론 순수 Javascript 코드로 직접 작성할 수도 있습니다. 하지만 JSX를 사용하면 구성 요소의 구조와 구성 요소 간의 관계가 더 명확해 보입니다.

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

와 같은 XML 태그는 JSX 변환 도구로 무엇으로 변환되나요?

예:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

은(는)

로 변환됩니다.

var Nav = React.createClass({/*...*/});
var app = React.createElement(
 Nav,
 {color:"blue"},
 React.createElement(Profile, null, "click")
);

즉, XML 태그를 작성할 때 기본적으로 React.createElement 메소드를 호출하고 ReactElement 객체를 반환합니다.

ReactElement createElement(
 string/ReactClass type,
 [object props],
 [children ...]
)

이 메소드의 첫 번째 매개변수는 HTML 표준 내의 요소를 나타내는 문자열이거나 이전에 캡슐화한 사용자 정의 구성요소를 나타내는 ReactClass 유형의 객체일 수 있습니다. 두 번째 매개변수는 이 요소의 모든 고유 속성(즉, 기본적으로 전달된 후 변경되지 않는 값)을 저장하는 개체 또는 사전입니다. 세 번째 매개변수부터 모든 후속 매개변수는 요소의 하위 요소로 간주됩니다.

JSX 변환기

JSX 구문이 포함된 코드를 순수 Javascript 코드로 변환하는 방법은 여러 가지가 있습니다. 변환되지 않은 인라인 코드나 HTML 코드 또는 외부 파일의 경우 스크립트 태그에 type="text"를 추가하고 도입해야 합니다. 그러나 이 방법은 프로덕션 환경에서는 권장되지 않습니다. 권장되는 방법은 코드가 온라인 상태가 되기 전에 변환하는 것입니다.

npm install -g react-tools

그리고 명령줄 도구를 사용하여 변환합니다(구체적인 사용법은 jsx -h를 참조하세요).

jsx src/ build/

gulp와 같은 자동화 도구를 사용하는 경우 해당 플러그인 gulp-react를 사용할 수 있습니다.

HTML 템플릿에서 JS 사용

HTML 템플릿에서 JS를 사용하는 것은 매우 편리합니다. JS 코드를 묶는 데 중괄호만 사용하면 됩니다.

var names = ['Alice', 'Emily', 'Kate']; 
 
React.render( 
<div> 
{ 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

컴파일하면 다음과 같습니다.

var names = ['Alice', 'Emily', 'Kate']; 
React.render( 
 React.createElement("div", null, names.map(function (name) { 
 return React.createElement("div", null, "Hello, ", name, "!") 
 }) ), 
 document.getElementById('example') 
); 

중괄호는 실제로 가변 출력 표현식이라는 점에 유의해야 합니다. JSX는 궁극적으로 중괄호 안의 내용을 React.createElement의 세 번째 매개변수로 직접 전달합니다(수정 없이 직접 전달됨). of 표현이 들어갈 수 있고, 3번째 매개변수로 직접 쓸 수 없는 방식은 모두 잘못된 것이므로 이렇게 쓰는 것은 옳지 않습니다.

React.render( 
<div> 
{ 
var a = 1; 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

중괄호 안의 내용이 세 번째 매개변수 바로 위에 위치하고 구문이 잘못된 것이 분명하기 때문입니다.

이것도 잘못 쓴 것입니다:

React.render( 
<div> 
{ 
var a = 1; 
 
} 
</div>, 
document.getElementById('example') 
); 

React.createElement(“div”, null, var a = 1;)는 구문 오류이기 때문입니다.
그러면 중괄호 안의 js 표현식이 세미콜론으로 끝날 수 없는 이유도 이해할 수 있습니다.

속성에 JS 변수를 출력하는 경우 따옴표를 추가할 수 없습니다. 그렇지 않으면 문자열로 처리되어 구문 분석되지 않습니다.
다음과 같아야 합니다.

<a title={title}>链接</a>

HTML 태그 사용

HTML 표준에 존재하는 요소를 만들려면 HTML 코드를 직접 작성하세요.

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

그러나 JSX 구문인 class와 for의 두 속성은 결국 순수 Javascript로 변환되므로 className과 htmlFor는 Javascript DOM과 마찬가지로 사용해야 합니다.

또 다른 요점은 HTML 표준 내에서 요소를 생성할 때 JSX 변환기가 이러한 비표준 속성을 삭제한다는 것입니다. 사용자 정의 속성을 추가해야 하는 경우 이러한 사용자 정의 속성 앞에 data- 접두사를 추가해야 합니다.

<div data-custom-attribute="foo" />

네임스페이스 구성 요소

예를 들어 구성 요소를 개발할 때 구성 요소에 여러 하위 구성 요소가 포함되어 있으면 이러한 하위 구성 요소를 상위 구성 요소의 속성으로 사용하려면 다음과 같이 사용할 수 있습니다.

var Form = MyFormComponent;

var App = (
 <Form>
 <Form.Row>
  <Form.Label />
  <Form.Input />
 </Form.Row>
 </Form>
);

이 방법을 사용하면 하위 구성 요소의 ReactClass를 상위 구성 요소의 속성으로 설정하기만 하면 됩니다.

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

하위 요소 생성을 JSX 변환기로 직접 전달할 수 있습니다.

var App = (
 React.createElement(Form, null,
  React.createElement(Form.Row, null,
   React.createElement(Form.Label, null),
   React.createElement(Form.Input, null)
  )
 )
);

이 기능을 사용하려면 버전 0.11 이상이 필요합니다

자바스크립트 표현

JSX 구문으로 Javascript 표현식을 작성하려면 삼항 연산자를 사용하는 다음 예시와 같이 {}만 사용하면 됩니다.

// Input (JSX):
var content = <Container>{window.isLoggedIn &#63; <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
 Container,
 null,
 window.isLoggedIn &#63; React.createElement(Nav) : React.createElement(Login)
);

그러나 JSX 구문은 단지 구문적 설탕일 뿐이라는 점에 유의해야 합니다. 그 뒤에는 ReactElement의 생성자 메소드 React.createElement가 호출되므로 다음과 같이 작성하는 것은 허용되지 않습니다.

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

변환된 자바스크립트 코드에서 명백한 구문 오류를 볼 수 있으므로 삼항 연산자를 사용하거나 다음과 같이 작성하세요.

if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

传播属性（Spread Attributes）

在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。

var props = { foo: x, bar: y };
var component = <Component { ...props } />;

这样就相当于：

var component = <Component foo={x} bar={y} />

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'