목차

• JSX란
• 바벨이란
• JSX에서 자바스크립트 사용
• JSX 변환 원리

JSX란

• JSX에 대해 자세히 알 고 싶다면 여기서 확인할 수 있습니다 -> JSX
• JSX란 간단히 정리하자면 JSX는 XML과 유사한 내장형 구문이며, 자바스크립트의 확장 문법이지만 자바스크립트 표준 문법 x
• 자바스크립트 표준 문법이 아니기 때문에 Babel과 같은 트랜스파일러로 변환을 해줘야 동작합니다.

바벨이란

• 바벨 공식문서

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

Babel은 주로 ECMAScript 2015+ 코드를 현재 및 구형 브라우저 또는 환경에서 호환 가능한 JavaScript 버전으로 변환하기 위해 사용되는 도구 체인입니다. Babel이 할 수 있는 주요 작업은 다음과 같습니다:

• 간단히 요약하면 최신 JS코드를 구형 JS코드로 변환해주는 컴파일러입니다.

• 또한 Babel은 JSX 구문을 변환할 수 있습니다

• Babel 변환 코드 사이트

• 아래와 같이 변환됩니다.
  

---

jsx에서 자바스크립트 사용

• 우선 JSX에서는 중괄호({})를 작성하고 안에 자바스크립트 문법을 사용할 수 있습니다.

• 하지만 자바스크립트 문법중에서도 표현식만 사용할 수 있습니다.

• 표현식이란 값으로 평가될 수 있는 문입니다.

• 표현식 예시

      // 숫자, 문자열 등 값 자체 표현식
      5;           // 숫자 리터럴 (값: 5)
      "Hello";     // 문자열 리터럴 (값: "Hello")

      // 연산을 통해 값을 생성하는 표현식
      5 + 3;       // 산술 연산 표현식 (값: 8)
      a * 2;       // 변수와 연산자를 통한 표현식 (값: a의 값에 따라 달라짐)
      true && false; // 논리 연산 표현식 (값: false)

      // 함수 호출 표현식
      Math.max(1, 2); // 함수 호출 표현식 (값: 2)

      // 객체나 배열도 표현식으로 간주됩니다
      [1, 2, 3];      // 배열 리터럴 (값: 배열)
      { x: 1, y: 2 }; // 객체 리터럴 (값: 객체)

• 아래와 같이 표현식의 경우 변환 됩니다.
  

• 표현식이 아닌 경우 예시

      // 변수 선언은 표현식이 아닙니다
      let x = 10;        // 변수 선언문 (값이 아닌 선언)

      // 조건문과 반복문도 표현식이 아닙니다
      if (x > 5) {       // 조건문 (값을 생성하지 않음)
        console.log(x);
      }

      for (let i = 0; i < 5; i++) {  // 반복문 (값을 생성하지 않음)
        console.log(i);
      }

      // 함수 선언도 표현식이 아닙니다 (함수 선언문)
      function greet() { // 함수 선언문 (값을 생성하지 않음)
        return "Hello!";
      }

• 아래와 같이 표현식이 아닌경우 에러가 발생합니다.
  

---

JSX 변환 원리

• 표현식을 사용해야 하는 이유는 위 사진에 나와 있습니다.
• 변환된 코드에서 children의 key에 대한 value 위치에 중괄호{}로 감싼 코드가 JavaScript 객체의 value로 들어가기 때문에, JavaScript 객체에서는 값이 아닌 다른 것은 value로 사용할 수 없습니다.
  

---

• 예전에는 그냥 JSX문법이니까 중괄호로 감싸서 사용했었는데, 이런 원리를 알게 되니 기본기가 중요하다는 생각이 들었고, 오늘도 조금은 기본기가 튼튼해진 것 같습니다.