jsx

1. JSX란?

• JSX는 JavaScript XML의 약어
• 자바스크립트의 확장 문법이다.
• 파일 내에 HTMl과 자바스크립트를 동시에 작성하기때문에 편리하다.
• JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨*을 사용해 일반 자바스크립트 형태의 코드로 변환된다.

2. JSX 문법

2.1 컴포넌트에 여러 요소가 있으면 반드시 부모 요소 하나로 감싸야 한다.

• Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문.

function Page(){
	return(
    	<div>
    		<div>Title</div>
        	<div>Contents</div>
        </div>
    )
}

Title과 Contents를 부모인 div로 감싸주었다.

• 리액트 v16 이상부터 도입된 Fragment라는 기능을 사용할 수 있다. Fragment란 위의 예시 코드에서 부모 요소인 div 대신 <>, </> 괄호만 작성하는 것을 Fragment라고 한다.

2.2 코드를 { }로 감싸 자바스크립트 표현식을 작성한다.

2.3 If문 대신 조건부 연산자를 사용한다.

2.4 AND 연산자(&&)를 사용한 조건부 렌더링 할 수 있다.

2.5 undefined를 렌더링하면 안된다

2.6 class대신 className으로 설정해야한다.

2.7 인라인 스타일링

• 카멜 표기법으로 작성해야 한다.

2.8 태그를 꼭 닫아야 한다.

---

*용어정리
바벨) 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인