JSX란 무엇인가?
jsx는 자바스크립트의 확장 문법이며 xml과 매우 비슷하게 생겼습니다.
이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드기 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
JSX === 중괄호로 감싼 자바스크립트 식=javascript expression
📕 Q. JSX도 자바스크립트 문법이라고 할 수 있나요?
JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아닙니다. 바벨에서는 여러 문법을 지원할 수 있도록 PRESET 및 Plugin을 설정합니다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있습니다.
jsx는 html과 닮았기 때문에 때로 이 둘을 혼동하기도 한다.
규칙이 있습니다.
- 감싸인 요소
여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.
📕 왜??? 요소 여러 개를 하나의 요소로 꼭 감싸 주어야 할까요?
그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.
jsx의 장점
- 보기 쉽고 익숙하다.
html코드를 작성하는 것과 비슷합니다. - 더욱 높은 활용도
jsx에서는 우리가 알고 있는 div나 span 같은 html 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 jsx 안에서 작성할 수 있습니다.
jsx의 단점
브라우저가 jsx를 해석하지 못한다는 점이다. 따라서 jsx를 순수 리액트로 반환해야 한다.
FrontEnd Developer