[React] JSX (JavaScript XML)

JSX 란?

React에서 UI를 만들 때 사용하는 JavaScript + HTML 혼합 문법입다.
겉으로 보기에는 HTML처럼 보이지만, 실제로는 JavaScript 코드이며 React가 이를 화면으로 변환해줍니다.

---

JSX를 사용하는 이유 (장점)

1. UI 구조가 명확하여 읽기 쉽습니다.
HTML 태그를 그대로 사용하므로 직관적입니다.

2. 에러를 초기에 잡을 수 있습니다.
JSX는 문법이 엄격하여 실수를 빠르게 알려줍니다.

3. 동적 UI를 쉽게 만들 수 있습니다.
변수, 연산, 조건문 등을 {} 안에서 자유롭게 쓸 수 있습니다.

4. 컴포넌트 기반 구조에 최적화되어 있습니다.
UI를 작은 단위로 나누어 관리하기 좋습니다.

---

JSX 문법 규칙

1. 반드시 하나의 부모로 감싸서 반환해야 합니다.

return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
);

 

2. HTML과 속성명(camelCase)이 다릅니다.

<div className="box"></div>

자주 사용하는 JSX 속성명

HTML	JSX
class	className
onclick	onClick
tabindex	tabIndex
maxlength	maxLength

 

3. JavaScript 표현식은 {} 안에서 사용합니다

function Hello() {

    const name = "kcm";
    return <h1>{name}</h1>;

}

{} 안에는 변수, 연산(삼항연산, and조건 등), 함수 호출등이 가능합니다.

if, for 문등은 사용할 수 없습니다.
if문 대체하여 사용할 수 있는 방법은
삼항연산자, and 조건

for문 대체하여 사용할 수 있는 방법은
.map() 을 사용

if나 for 문등을 대체하여 사용하는 법은 나중에 따로 다루도록 하겠습니다.

---

이렇게 JSX에 대해 알아봤습니다.
그냥 보면 html 문법과 같아 보이지만
JSX로 인해 html문법을 Javascript로 보다 쉽게 작성하고,
속성명을 camelCase로 작성, 표현식 작성법,
작성시 주의해야할 점에 대해 알아봤습니다.