JSX (Javascript Syntax eXtention)

1. 바벨 (Babel)

• 바벨은 다양한 기능을 갖고 있는데 그중 하나가 이 글의 주제인 JSX 문법입니다.


• 바벨을 사용하면 JSX 브라우저가 ES6 코드를 읽기 쉬운 ES5 코드로 변환해주고 이를 기반으로 개발자는 최신 문법을 사용하면서도 여러 브라우저에서 작동될 수 있는 코드를 작성할 수 있습니다.

2. JSX (Javascript Syntax eXtension)

아래에 작성된 예제 코드에서의 변수 선언을 설명하겠습니다.

const element = <h1>Welcome to my!</h1>;

JS 문법과 HTML 태그가 뒤섞인 것처럼 보이는 이 문법을 JSX라고 말하며
영문 뜻 그대로 JS 문법의 확장을 뜻합니다.

• JSX는 하나의 파일에 JS와 HTML을 동시에 작성하여 편리하고 JS에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성이 간단합니다.
• 아래는 실제로 작성할 JSX 코드의 예시입니다:

  import React from 'react';
  function App() {
    return (
      <h3>zeew00 velog 방문을 환영합니다!!</h3>
    );
  }
  export default App;
  

• 위와 같이 작성하면 웹 상에서 작동(구현)이 불가능하므로 바벨(babel)이 다음과 같이 JS 코드로 해석해줍니다:

  function App() {
    return React.createElement("h3", null, "zeew00 velog 방문을 환영합니다!!");
  }
  

3. JSX 문법

3-1. 반드시 부모 태그 하나가 감싸는 형태

이말은 쉽게 풀이하자면 JSX 코드 블록에서 여러 태그를 반환할 때 하나의
최상위 태그로 감싸야 한다는 의미입니다. (아래의 코드로 추가 설명을 하겠습니다.)

• 다음은 유효하지 않은 JSX 코드의 예시입니다. JSX는 항상 하나의 최상위 태그만을 반환할 수 있는데
  위와 같이 여러 태그를 반환하면 오류가 발생하게 됩니다.


• 다음은 여러 태그를 하나의 부모 태그로 그룹화한 올바른 JSX 코드입니다. 위 예제 코드에서는 <div> 태그가 <h2>, <p>
  태그들을 감싸고 부모 태그의 역할을 하고 있습니다.
  이와 같이 JSX는 여러 태그들을 하나의 부모 태그로
  그룹화하여 유효한 JS 코드로 변환할 수 있습니다.

3-2. JS 표현식

JSX 안에서도 JS 표현식 사용이 가능한데 이를 사용하기 위해선
JSX 내부에서 코드를 {}로 감싸주면 되며 리터럴, 연산자, 함수 등의
다양한 JS의 표현식을 사용할 수 있습니다.

• 다음은 JSX 내부에 JS의 리터럴 표현식을 사용한 예제 코드입니다. 위 코드를 실행 시 아래와 같이 정상적으로 웹 페이지에 표시가 됩니다.

3-3. if문과 for문 대신 삼항 연산자(조건부 연산자) 사용

if 구문과 for 루프는 JS 표현식이 아니기 때문에
JSX 내부 JS 표현식으로 사용이 불가능합니다.

따라서 조건부에 따라 {} 안에서 삼항 연산자를 사용합니다.

• 방법 1) 외부에서 'if' 조건문 사용 :


• 방법 2) 내부에서 삼항 연산자 사용 :


• 방법 3) '&&' 연산자 사용 예시


• 방법 4) 반복 랜더링 (for)

  JSX에서는 직접 for문을 사용할 수 없지만 배열의
  .map() 메서드를 사용하여 반복적으로 렌더링을 할 수 있습니다.

  

Babel 참고 블로그
JSX(정의, 장점, 문법) 참고 블로그