JSX

JSX란?

- JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법입니다.

- 자바스크립트에서 HTML 문법을 사용할 수 있습니다.

- 코드의 가독성과 유지보수 측면에서 이점이 많습니다.

참고 - React 공식 홈페이지(JSX 소개)

작성방법

1. 반드시 부모 요소는 한개의 태그로 감싸져 있어야 합니다.

Virtual DOM 에서 컴포넌트 변화를 효율적으로 감지하여 비교할수 있도록 컴포넌트 내부는 하나의DOM트리로 구성되어 있어야 합니다.

2. 자바스크립트 표현식 작성을 위해서 { } 로 감싸야 합니다.

3. 삼항연산자를 활용해 조건부 렌더링을 할 수 있습니다.

if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없고 삼항연산자(조건부 연산자)를 사용합니다.

4. AND 연산자를 이용한 조건부 렌더링을 할 수 있습니다.

특정조건을 만족할때만 내용을 보여주고, 만족하지 않을때는 렌더링 하지 않는 경우에 사용합니다.

5. class정의시 class가 아닌 className을 사용해야 합니다.

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.

후기

꼭 JSX문법을 사용하지 않아도 된다고는 하지만 리엑트에서도 공식적으로 사용 권장을 희망하고 있고 JSX문법을 사용한 코드와 사용하지 않은 코드를 비교해보면 가독성 측면에서 정말 차이가 많이 나는걸 학습하면서 직접적으로 확인 할 수 있었습니다.