JSX에 반응하다


React는 일반 JavaScript 대신 JSX를 사용합니다.

JSX는 XML과 매우 유사한 JavaScript 구문 확장입니다.

꼭 JSX를 사용할 필요는 없지만 다음과 같은 장점이 있습니다.

  • JSX는 JavaScript 코드로 컴파일한 후 최적화하기 때문에 실행 속도가 더 빠릅니다.

  • 유형이 안전하며 컴파일 과정에서 오류가 발견될 수 있습니다.

  • JSX를 사용하여 템플릿을 작성하는 것이 더 쉽고 빠릅니다.

JSX 사용

JSX는 HTML과 비슷해 보입니다. 예를 살펴보세요.

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

위 코드에 여러 개의 HTML 태그를 중첩할 수 있습니다. 이를 div 요소, p 요소로 래핑해야 합니다. 사용자 정의 속성 data-myattribute을 추가한 예 사용자 정의 속성을 추가하려면 data- 접두사를 사용해야 합니다.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	<h1>php中文网</h1>
      	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

독립 파일

React JSX 코드는 독립 파일에 배치할 수 있습니다. helloworld_react.js 파일의 코드는 다음과 같습니다. 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

그런 다음 HTML 파일에 JS 파일을 추가합니다.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  <script type="text/babel" src="helloworld_react.js"></script>
  </body>
</html>

Run Instance»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

JavaScript Expression

JSX에서는 JavaScript 표현식을 사용할 수 있습니다. 표현식은 중괄호 {}로 작성됩니다. 예제는 다음과 같습니다.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	  <h1>{1+1}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

if else 문은 JSX에서 사용할 수 없습니다. 조건부(삼항 연산)를 사용하여 ) 표현식을 대체할 수 있습니다. 다음 예에서 변수 i가 1이면 브라우저는 true를 출력합니다. i 값이 수정되면 false 버튼이 출력되어 온라인 인스턴스를 볼 수 있습니다.

스타일
React는 인라인 스타일 사용을 권장합니다.
camelCase 구문을 사용하여 인라인 스타일을 설정할 수 있습니다. React는 요소 번호를 지정한 후 자동으로 px

를 추가합니다. 다음 예에서는

myStyle
인라인 스타일을
h1

요소에 추가하는 방법을 보여줍니다.

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Comments

댓글은 중괄호 안에 작성해야 합니다. 예는 다음과 같습니다:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>php中文网</h1>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

Array

JSX를 사용하면 템플릿에 배열을 삽입할 수 있으며 배열은 자동으로 모든 멤버를 확장합니다.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
            <h1>php中文网</h1>
            {/*注释...*/}
         </div>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

인스턴스 실행»

"인스턴스 실행" 클릭 온라인 예제를 보려면 버튼을 클릭하세요

HTML 태그와 React 구성 요소 비교

React는 HTML 태그(문자열) 또는 React 구성 요소(클래스)를 렌더링할 수 있습니다.

HTML 태그를 렌더링하려면 JSX에서 소문자 태그 이름을 사용하세요. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1>php中文网</h1>,
        <h2> php中文网</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

React 구성 요소를 렌더링하려면 대문자로 시작하는 로컬 변수를 생성하세요. 

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

React의 JSX는 대문자와 소문자 규칙을 사용하여 로컬 구성 요소 클래스와 HTML 태그를 구별합니다.

참고:

JSX는 JavaScript이므로 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor와 같은 일부 식별자가 해당 속성으로 사용됩니다.