1 - 03. JSX와 Babel , JSX 다루기

msg016·2022년 6월 13일
0

React lecture

목록 보기
2/8
패스트캠퍼스 '한 번에 끝내는 React의 모든 것' 수강 후 정리.

JSX

const element = <h1 className='title'>Hello, world!</h1>;

문자도 HTML도 아닌 JavaScript의 확장 문법.

근본적으로 JSX는 React.createElement(component, props, ...children)함수를 매번 작성하는 대신 보다 직관적이고 효율성 높게 작성할 수 있는 문법적 설탕이다.
위의 JSX 코드는 바벨 등의 컴파일러에 의해 아래와 같이 변환된다.

const element = React.createElement(
  'h1',
  {className: 'title'},
  'Hello, world!',
 )

Babel

컴파일러.

ES6+ 혹은 React의 JSX, 타입스크립트와 같이 구버전의 브라우저가 해석하지 못하거나 다른 언어를 분류되는 언어들에 대해서도 정상적으로 동작할 수 있도록 ES6+는 ES5 문법으로, JSX의 경우 위와 같이 React.createElement로 변환하여 준다.

적용

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Static Template</title>
  </head>
  <body>
    <!-- react -->
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <!-- babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>

    <script type="text/babel">
      const $root = document.getElementById("root");
      const $h1 = <h1 className="title">Hello, World!</h1>;
      
      ReactDOM.render($h1, $root);
    </script>
  </body>
</html>

CDN을 통해 Babel을 설치하고, script태그에 type='text/babel' 을 설정하여 바벨이 해당 스크립트를 읽고 변환해야 한다는 것을 알려준다.

JSX의 특징

  • 표현식 사용 가능
const className = 'title';
const innerText = 'Hello, world!';

const element = <h1 className={className}>{innerText}</h1>;
  • JSX 자체도 객체
const className = 'title';
const innerText = 'Hello, world!';
const element = <h1 className={className}>{innerText}</h1>;

const $h1 = element; // JSX 표현식을 변수에 할당 가능.
  • 자식 정의
const div1 = <div className='div' />
  
const div2 = (<div className='div'>
              	<h1>Hello!</h1>
              </div>
             );
  • 전개연산자를 통한 Props 전달
const titleClassName = 'title';
const text = 'Hello, world!';
const props = { className: titleClassName, children: text };

const element = <h1 {...props} />;
profile
프론트엔드 개발자 지망생

0개의 댓글