JSX - 기본 개념과 문법 정리

 

1. JSX?

 

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

 

위의 희한한 태그 문법은 문자열도, HTML도 아닙니다.

JSX라 하며, JavaScript를 확장한 문법으로 React에서 Element를 생성하기 위해 사용됩니다.

https://ko.reactjs.org/docs/introducing-jsx.html

 

아래의 예처럼, 자식 요소가 있는 HTML을 JSX 없이 React Element로 생성해보겠습니다.

<div>
  <h1>hello</h1>
  <ul>
    <li>hi</li>
  </ul>
</div>

ReactDOM.render(
  React.createElement('div', null,
    React.createElement('h1', null, 'hello'),
    React.createElement('ul', null,
      React.createElement('li', null, 'hi')
    )
  ),
  document.querySelector('#root')
);

 

이번엔 JSX를 사용해서 React의 Element를 생성해 보겠습니다.

ReactDOM.render(
  <div>
    <h1>hello</h1>
    <ul>
      <li>hi</li>
    </ul>
  </div>,
  document.querySelector('#root')
);

 

어떤가요?

JSX를 사용한 예가 가독성이 훨씬 좋다는 걸 알 수 있습니다!

뿐만 아니라, 태그 문법을 엄격히 검사하기 때문에 문법적 오류를 인지하기도 쉽습니다.

 

위와 같은 이유로 JSX를 사용할 충분한 동기부여가 되었을 것입니다.

이제 JSX 문법에 대해 간략히 알아보겠습니다.

 

 

2. JSX 문법

JSX를 사용하기 위해선, babel이 필요합니다. 이 글에선 간단한 테스트를 위해 CDN을 사용했습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

<script> 태그 내에서 작성할 땐, type Attribute의 값으로 text/babel을 넣어줘야 합니다.

<script type="text/babel">
  // do something
</script>

 

이제 테스트할 준비가 되었으므로, 문법에 대해 간략히 알아보겠습니다.

 

• 최상위 요소는 하나여야 합니다.

  • // 최상위 요소는 반드시 하나여야 하므로 아래 코드는 유효하지 않습니다.
    ReactDOM.render(
      <div>
        <h1>hello</h1>
        <ul>
          <li>hi</li>
        </ul>
      </div>
      <div>
        <h1>hello</h1>
        <ul>
          <li>hi</li>
        </ul>
      </div>,
      document.querySelector('#root')
    );

• 자식들을 바로 렌더링하고 싶으면, <></>를 사용합니다. (= React.Fragment)

  • // 최상위 요소를 빈 태그(<>)로 감싸주면 형제 요소를 삽입할 수 있습니다.
    // 빈 태그(<>)는 빈 태그 안의 내용을 그대로 대상에 삽입하고 싶을 때 사용됩니다.
    ReactDOM.render(
      <>
        <div>
          <h1>hello</h1>
          <ul>
            <li>hi</li>
          </ul>
        </div>
        <div>
          <h1>hello</h1>
          <ul>
            <li>hi</li>
          </ul>
        </div>
      </>,
      document.querySelector('#root')
    );

• JavaScript 표현식을 사용하려면, { }를 이용합니다.

  • const text = 'hello';
    
    ReactDOM.render(
      <div>
        <h1>{text}</h1>
        <ul>
          <li>{'hi'}</li>
        </ul>
      </div>,
      document.querySelector('#root')
    );
    
    // JavaScript 변수를 사용할 수 있고,
    // 리터럴 값을 그대로 사용할 수도 있습니다.

• if 문은 사용할 수 없으며, 삼항 연산자 혹은 &&를 사용할 수 있습니다.

  • const text = 'hello';
    
    ReactDOM.render(
      <div>
        <h1>{true ? text:'not available'}</h1>
        <ul>
          <li>{'hi'}</li>
        </ul>
      </div>,
      document.querySelector('#root')
    );

• style Attribute를 사용해 인라인 스타일링이 가능합니다.

  • // JavaScript 표현식인 { }에 Object 리터럴 값으로 사용할 수 있습니다.
    // CSS 속성을 camelCase로 작성해야 합니다.
    ReactDOM.render(
      <div style={{backgroundColor:"black", color:"white"}}>
        <h1>hello</h1>
        <ul>
          <li>hi</li>
        </ul>
      </div>,
      document.querySelector('#root')
    );

• class Attribute를 추가하려면 className을 사용해야 합니다.

  • ReactDOM.render(
      <div className="container">
        <h1>hello</h1>
        <ul>
          <li>hi</li>
        </ul>
      </div>,
      document.querySelector('#root')
    );

• 태그는 꼭 닫아주어야 합니다.

  • ReactDOM.render(
      <div>
        <h1>hello</h1>
        <ul>
          <li>hi</li>
        </ul>
        <br/>
      </div>,
      document.querySelector('#root')
    );

 

이제 JSX를 활용해서 React 애플리케이션을 만들어 봅시다!