[React] React.js 의 JSX 문법

React에서는 HTML을 직접적으로 작성하지 않고 유사해 보이는 JSX을 사용합니다.  JSX란 자바스크립트의 확장된 문법으로써 XML과 비슷하게 생긴 프로그래밍 언어입니다.

 

React의 JSX란?

JSX란 자바스크립트의 확장된 문법으로써 Javascript XML의 줄임말입니다. JSX는 React에서 사용되는 문법으로 공식적인 자바스크립트 문법은 아닙니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 문법으로 변환됩니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정하여 개발자들이 임의로 만든 문법 또는 자바스크립트의 문법을 사용할 수 있도록 변환합니다.

 

JSX 문법 규칙

1. 부모의 요소 하나가 반드시 감싸는 형태야 하는 규칙 - Virtual DOM에서 컴포넌트 변화를 감지하여 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 합니다.

 

2. 자바스크립트 표현식

 - JSX 문법 내부에 있는 코드를 { }로 감싸게 되면 자바스크립트 표현식을 사용 가능합니다.

 

3. 조건부 연산자 및 조건부 렌더링

 - JSX 내부에서 자바스크립트 표현식을 사용할 때에는 조건문을 사용할 수 없지만 조건에 따라서 다른 내용을 렌더링을 할 때에는 삼항 연산자를 통하여 조건부 연산자를 사용할 수 있습니다. 또한 AND연산자(&&)를 사용하면 더 짧은 코드로 조건부 렌더링을 사용 가능합니다.

 

4. 주석처리 방법

 - JSX 문법에서 주석처리 방법으로는 {/*.....*/}와 같은 방법을 사용합니다.

 

5. JSX 문법에서의 class 사용방법

 - JSX 문법에서는 class가 아닌 className으로 사용해야만 합니다. 

 

6. JSX 문법에서의 undefined 반환 방법

 - React 컴포넌트의 함수에서 undefined를 반환하여 렌더링을 하지 않을 때에는 OR(||) 연산자를 사용하여 오류를 방지해야만 합니다.