JSX(JavaScript XML)란?

JSX는 React에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다.
이는 JavaScript의 확장 문법으로, XML 형식의 마크업을 JavaScript 코드 안에서 작성할 수 있게 해준다.
JSX를 사용하면 HTML과 비슷한 문법을 사용하여 UI를 구성할 수 있으며, React의 가독성과 유지보수성을 향상시킨다.

JSX의 특징

• HTML처럼 보이지만 JavaScript: JSX는 HTML처럼 생겼지만 결국 JavaScript 코드다. 이는 React 요소를 생성하는 데에 사용된다.
• Babel 변환: JSX 코드는 Babel과 같은 도구를 사용하여 JavaScript 코드로 변환된다. 이를 통해 브라우저에서 실행 가능한 JavaScript 코드로 변환된다.

JSX 사용 규칙

1. 태그 닫기: 모든 태그는 꼭 닫혀 있어야 한다. 예를 들어, <div> </div>와 같이 사용한다.
   input 같은 경우는 self-closing 태그로 <input />와 같이 사용한다.

2. 여러 요소 감싸기: JSX 내에서는 최상위에 1개의 요소로 감싸져 있어야 한다. 여러 요소를 사용할 경우 Fragment(<></>)(브라우저에서 별도로 tag 인식이 되지않음)를 사용하거나 <div> 등의 요소로 감싸야 한다.

	<>
  		<div></div>
  		<div></div>
    </>

3. JavaScript 값 사용: JSX 내부에서 JavaScript 값을 사용할 때는 중괄호({})를 사용한다. 예를 들어, <div>{name}</div>와 같이 사용할 수 있다.

4. 스타일: 스타일은 객체 형태로 작성되며, CamelCase로 작성되어야 한다. 예를 들어, const style = { backgroundColor: 'black' }와 같이 작성된다. 사용할 때는 <div style={style}>과 같이 사용된다.

5. CSS 클래스: CSS 클래스는 className 속성을 통해 지정된다. 외부 CSS 파일을 import한 후에는 해당 클래스를 사용할 수 있다. 예를 들어, <div className="gray-box">와 같이 사용된다.

6. 주석: JSX 내에서 주석을 사용할 때는 {/* */}를 사용한다. 태그 안에서는 //를 사용할 수 있다.

{/* 기본 주석*/}
<div>
  // 태그 안에 주석
</div>

JSX를 사용하면 React 컴포넌트를 보다 직관적이고 유연하게 작성할 수 있다.