React 8주 스터디 기록 #2 - JSX 개요

JSX란

JSX는 JavaScript XML의 약자로,
자바스크립트 코드 안에서 HTML과 유사한 문법으로 UI를 작성할 수 있게 해주는 문법 확장이다.

JSX는 브라우저가 직접 이해하는 문법이 아니라,
빌드 과정에서 일반 자바스크립트 코드(React.createElement)로 변환되어 실행된다.

예시:

const element = <h1>Hello, React!</h1>

위 코드는 내부적으로 다음과 같이 변환된다.

React.createElement('h1', null, 'Hello, React!')

---

JSX의 문법적 특징

JSX는 HTML과 문법이 매우 유사하기 때문에 처음 접하는 사람도 어렵지 않게 사용 할 수 있습니다.
하지만 HTML과는 조금 다른 JSX만의 규칙이 몇 가지 존재합니다.

[1] 하나의 루트 요소로 반환하기
JSX에서 작성하는 컴포넌트는 반드시 하나의 루트 요소만 반환해야 합니다. 여러 요소를 반환하려면 하나의 부모 요소로 감싸거나 Fragment를 사용해야합니다
컴포넌트는 반드시 하나의 루트 요소만 반환해야 한다.

// 잘못된 예
return (
  <h1>Hello</h1>
  <p>React</p>
)


// 올바른 예시 1 - 부모 요소로 감싸기
return (
  <div>
    <h1>Hello</h1>
    <p>React</p>
  </div>
)


// 올바른 예시 2- 부모 요소로 감싸기
return (
  <>
    <h1>Hello</h1>
    <p>React</p>
  </>
)

[2] 모든 태그 닫기
HTML에서는 빈 태그를 닫지 않아도 되지만, JSX에서는 모든 태그를 반드시 닫아야 합니다.

// 잘못된 예시
<img src="logo.png">


// 올바른 예시
<img src="logo.png" />

[3] 태그 속성은 카멜 케이스로 작성하기
JSX에서는 HTML 속성명을 카멜 케이스로 작성해야 합니다. class나 for처럼 자바스크립트 예약어와 충돌하는 속성은 className, htmlFor와 같이 다른 이름으로 대체합니다

// 잘못된 예시
<div class="box"></div>
<label for="name">이름</label>

// 올바른 예시
<div className="box"></div>
<label htmlFor="name">이름</label>

이유: class, for는 JavaScript 예약어이기 때문.

[4]표현식은 중괄호 안에서 사용하기
JSX 내부에서는 {} 안에 자바스크립트 표현식을 사용할 수 있음

const name = "Yujin"
return <h1>Hello, {name}</h1>

*연산도 가능함

return <p>{1 + 2}</p>

단, if문이나 for문은 직접 사용할 수 없다.(표현식만 가능)

[5] 인라인 스타일은 객체로 지정하기
HTML에서는 style 속성을 문자열로 스타일을 지정하지만, JSX에서는 자바스크립트 객체로 지정합니다.

// html
<div style="color: red;"></div>

// JSX
<div style={{ color: 'red' }}></div>

<div style={{ backgroundColor: 'black' }}></div>
<br>

1) style 값은 객체, 2) 속성명은 카멜 케이스

[6] 주석은 중괄호 안에 작성하기
JSX 내부에서는 중괄호 안에서 작성해야 함

return (
  <div>
    {/* 이 부분은 주석입니다 */}
    <h1>Hello</h1>
  </div>
)

---

JSX는 HTML과 매우 유사하지만,
실제로는 자바스크립트 위에서 동작하는 문법 확장 이다.

HTML과의 차이점을 정확히 이해하는 것이
리액트 컴포넌트를 작성하는 첫 단계라고 느꼈다.