JSX

React(리액트)란 JavaScript UI 라이브러리다. 

* 라이브러리(Library)는 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 재사용할 수 있도록 Class나 Function으로 만들어진 것이다.

 

React에서는 JSX 표현을 사용한다. 

 

JSX(Syntax extension for JavaScript)

JSX는 JavaScript 확장 버전으로 HTML + JavaScript라 보면 된다. 

const hi = <p>Hi</p>;

 

위 처럼 HTML과 자바스크립트 코드를 혼용해서 사용할 수 있다. 

 

JSX는 자바스크립트 문법이 아니라 브라우저가 해석하지 못해 오류가 난다. 따라서 JSX 문법이 포함된 React.js를 사용하기 위해 해당 파일을 정규 자바스크립트로 변환시키는 컴파일 과정이 필요하다. 

 

const hi = <input readOnly={true} />;
 
const myFavorite = {
    food: <li>pizza</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};

JSX는 자바스크립과 다르기 때문에, 태그의 속성명(attribute)도 다르게 쓰인다. 

예로, 원래 class로 불러오면 됐던 것이 JSX에서는 className으로 써야 한다. (무조건 캐멀형식으로 써야 한다)

 

 

JSX 특징

1. Self-Closing Tag

그 어떤 태그라도 self-closing tag(< />)가 가능하다. 

<img src="name.png" />

<input type="button" />

자바스크립트에서는 img태그나 input에 closing을 하지 않아도 됐지만, JSX는 무조건 닫아야 한다. 

 

2. 소괄호로 하나의 태그로 시작하기

이는 Nested JSX의 경우 해당된다. 

// 항상 소괄호로 감싸기
const good = ( 
 <div> 
 <p>hi</p> 
 </div> 
);
 
 
// (틀린 예) 두개의 태그로 시작
const wrong = (
<p>list1</p>
<p>list2</p>
); 
 
// (옳은 예) 하나의 태그로 시작 
const right = ( 
<div> 
   <p>list1</p> 
   <p>list2</p> 
</div> 
);