[React] - JSX란?

 

 

 

JSX 란?

• JSX(Java Script XML)는 Javascript가 확장된 문법이다.
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환시켜줘야 한다. 

왜 JSX를 써야할까?

- 한 눈에 볼 수 있는 기능과 디자인 

• JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 할 수 있다.
• React에서는 JSX를 이용해서 DOM 코드보다 명시적으로 코드를 작성 할 수 있다.
• JSX를 사용함으로써 코드를 이해하기 쉬워지며, Babel이 알아서 JSX 코드를 변환해 주니 가독성이 높고 작성하기 쉽다. 

 

💡 JSX 규칙

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

- Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 

   DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 

 

ex)에러 코드

ex) 정상 코드 

 

2.자바스크립트 표현식

JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면

JSX내부에서 코드를 {}로 감싸주면 된다.

 

3.if문(for문) 대신 삼항 연산자 (조건부 연산자) 사용

• if문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
• 그렇기 때문에 조건부 렌더링은 if문이 아닌 삼항 연산산자를 이용해야 한다. 

 

4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

1) class 대신 className

-일반 HTML에서 CSS 클래스를 사용할 때에는 class 라는 속성을 사용한다.

-JSX에서는 class가 아닌 className 을 사용한다.

 

2) 사용자 정의 컴포넌트는 대문자로 시작

React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다. 소문자로 시작하게 되면 일반적인

HTML 엘리먼트로 인식을 하게 된다.