[기술면접] JSX

JSX란?

• 페이스북에서 소개한 문법으로 자바스크립트에 XML을 추가한 것이다.
• 브라우저에서 실행하기전 번들링되는 과정에서 트랜스파일러를 거쳐 js 런타임이 이해할 수 있는 일반 JS 코드로 변환된다.

JSX 구성

1. JSXElement
   -> JSX를 구성하는 기본 요소이다. HTML의 Element와 비슷한 역할을 한다.

• JSXOpeningElement
• JSXClosingElement
• JSXSelfClosingElement
• JSXFlagment

2. JSXAttributes
   -> JSX에 부여할 수 있는 속성을 의미한다. 필수는 아니다.

3. JSXChildren
   -> JSXElement의 자식값을 나타냄. JSX는 속성을 가진 트리구조를 나타내기 위해 만들어졌다.
   -> 즉 JSX로 부모-자식관계를 나타낼수있으며 그 자식을 JSXChildren이라함

4. JSXStrings

JSX 문법 특징 및 준수사항

컴포넌트에 여러 요소가 있다면, 반드시 부모요소 하나가 감싸는 형태여야함

=> 이유: Virtual DOM 방식에서는 컴포넌트 변화를 감지할때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 한다는 규칙이 있어서.

자바스크립트의 값을 JSX 안에서 렌더링할 수 있다.

JSX 내부의 자바스크립트 표현식 내에서 if문 사용할 수 없다!

=> 삼항 연산자를 사용한다.

파일명 .js vs .jsx

확장자로서의 큰 차이점은 없다. 하지만 jsx가 표준 자바스크립트 문법이 아니기 때문에, 구분해서 쓰도록 하자

cf. 리액트는 JSX사용이 필수는 아니지만, JS코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 되고, 에러메시지 등이 개발에 도움이 될 것이므로 추천한다!

JSX는 어떻게 자바스크립트에서 변환될까?