JSX란?
JavaScript + XML을 의미하며 개체 생성과 함수 구출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능입니다.
- JSX는 react와 react native에서 사용되며 가독성이 높고 작성하기 쉽다는 장점이 있습니다.
- JSX코드로 작성된 코드는 이후 바벨을 이용하여 자바스크립트 코드로 변환됩니다.
babel
바벨은 ES6 이상 혹은 JSX 같은 코드를 브라우저가 이해할 수 있는 js 코드로 변환해주는 자바스크립트 트랜스 컴파일러입니다.
바벨을 이용해서 변환된 결과는 바벨 홈페이지에서 직접 테스트 해볼 수 있습니다.
JSX 문법
jsx를 사용할 때 몇가지 주의해야 할 점들이 있습니다.
1. jsx는 반드시 하나의 부모로 감싸진 상태로 반환되어야 합니다.
view는 웹 프로그래밍에서 div와 비슷한 역할을 합니다.
만약 view처럼 뭔가 역할을 하는 부모로 감싸지 않고 두개 혹은 그 이상을 반환하고 싶다면 플레그먼트(Fragment)라는 것을 사용하면 됩니다.
플레그먼트는 단축 문법을 제공하고 있습니다.
2. jsx는 js 변수를 전달해서 이용할 수 있다.
3. jsx에서는 조건문을 이용해서 상황에 따라 다른 요소를 렌더링 할 수 있습니다.
만약 if문을 사용한다면 즉시실행 함수형태로 작성해야 합니다.
4. jsx에서는 삼항 연산자를 이용해서 특정 조건에 따라 다른 값을 렌더링 할수 있습니다.
5. and 연산자나 or 연산자를 사용할 수 있습니다.
and 연산자를 사용하면 앞에 조건이 참인 경우에 뒤에 내용이 렌더링되고 or 연산자를 사용하면 반대로 앞에 내용이 참이 아닌 경웅에 내용이 렌더링 됩니다.
6. null과 undefined
jsx에서 null은 아무것도 렌더링하지 않고 문제도 발생하지 않습니다. 하지만 undefined는 에러가 발생합니다.
7. 주석
