Babel과 JSX
Babel 이란?
| Babel is Javascript compiler
Bable은 javascript로 결과물을 만들어 주는 컴파일러다.(트랜스 파일러라고 하는 곳도 있음)
왜 Javascript로 변환하는 과정이 필요할까?
프론트엔드는 빠르게 발전중이며
최신 브라우저 조차도 지원하지 못하는 문법과 여러 기술들이 출연하고 있다.
ESNext 문법을 기존의 브라우저에 사용하기 위해 babel은 필수적
Babel 사용 이유
Babel을 사용하는 이유를 알기 위해서는 먼저 크로스 브라우징에 대한 이해가 필요하다
크로스 브라우징이란?
플랫폼이나 각 브라우저의 랜더링 엔진의 차이로 보이는 모습이 다른 경우가 있는데,
최적화 작업을 통해 기존에 의도한 대로 보이도록 하는 작업을 말한다.
개발을 진행하면서 간혹 최신 브라우저에서 동작하는 기능을 다른 브라우저나 이전 버전의 브라우저에서 구현해야하는 경우, 기능 자체를 생략하거나 단순화해야 하는 상황이 발생한다.
이런 이슈는 코드의 일관성을 해칠 수 있으며, 협업 과정에서 또 다른 문제를 야기할 수 있다.
Babel은 이런 문제점을 보완하고 해결하기 위해 등장했다.
JSX란?
JSX는 Javascript에 XML을 추가하여 확장한 문법이다.
JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적은 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
JSX는 하나의 파일에 자바스크립트와 HTML을 동시 작성하여 편리하다.
자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.
JSX문법
1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.
2. 자바스크립트 표현식
- JSX안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 {}로 감싸주면 된다.
- 유효한 모든Javascript 표현식을 넣을 수 있다.
- if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
- if문과 for문은 자바스크립트 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
그래서 조건부에 따라 다른 렌더딩 시 JSX 주변 코드에서 if문을 사용하거나 {} 안에서 삼항 연산자(조건부 연산자)를 사용한다.
- ReactDOM은 HTML 어트리뷰트 이름 대신 카멜케이스 프로퍼티 명명 규칙을 사용한다.
- JSX스타일링
- JSX에서 자바스크립트 문법을 쓰려면 {}를 써야해서, 스타일을 적용할 때에도 객체 형태로 넣어주어야 한다.
- 카멜케이스로 작성해야한다.
class => className으로 사용
- JSX 내에서 주석 사용
- JSX 내에서 {/* */} 형식으로 사용한다.
