JSX는 XML과 유사한 내장형 구문이며, 자바스크립트의 확장 문법이지만 자바스크립트 표준 문법 x
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 구문을 변환할 수 있습니다
아래와 같이 변환됩니다.
우선 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!";
}
children의 key에 대한 value 위치에 중괄호{}로 감싼 코드가 JavaScript 객체의 value로 들어가기 때문
에, JavaScript 객체에서는 값이 아닌 다른 것은 value로 사용할 수 없습니다.