JSX 소개

JSX란 무엇입니까?
간단히 말해서 JSX는 원시 React API 위에 있는 구문 설탕일 뿐입니다.

// JSX (HTML-like Syntax)
const reactElement =  <h1>Hello World</h1>;

// compiles to raw React APIs
const reactElement = React.createElement('h1', {}, 'Hello World');


JSX는 실제로 JavaScript가 아니므로 JSX를 컴파일하려면 컴파일러가 필요합니다. Babel은 JSX를 컴파일하는 데 사용할 도구 중 하나입니다.

Babel은 JavaScript로 작성되었으므로 실제로 브라우저에서 직접 실행하여 즉시 코드를 컴파일할 수 있습니다.

웹 애플리케이션에서 babel을 사용하려면. babel에 대한 스크립트 태그를 포함해야 하고 스크립트 유형을 text/javascript에서 text/babel로 변경해야 합니다. 그래서 babel은 어떤 스크립트 태그를 컴파일해야 하는지 식별할 수 있습니다.

<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>

<script type="text/babel">
  // JavaScript + React
</script>


JSX를 사용하여 이전 기사의 예제 1을 다시 만들어 봅시다.

샘플 코드

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>

  <script type="text/babel">
    // JSX
    const divElement = <div>Hello World</div>

    ReactDOM.render(divElement, document.getElementById('root'))
  </script>
</body>


The compiled code is added to the head tag.





예 1


보간
보간법은 "다른 성질의 것을 다른 것에 삽입하는 것"으로 정의됩니다.

샘플 코드

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>

  <script type="text/babel">
    // interpolation
    const divElement = <div>{new Date().toLocaleString()}</div>

    ReactDOM.render(divElement, document.getElementById('root'))
  </script>
</body>


예 2


이 기사에서 무언가를 배웠기를 바라며 의심이 있으시면 의견을 남겨주십시오. 귀하의 모든 질문에 기꺼이 답변해 드리겠습니다.

제 이름은 Bipin Rajbhar이고 QuikieApps의 소프트웨어 엔지니어이며 저를 팔로우하거나 연결할 수 있습니다.

자원
The Beginner's Guide to React
Epic React

좋은 웹페이지 즐겨찾기