리액트 핵심: 컴포넌트의 이해와 JSX 문법

2. 리액트 핵심: 컴포넌트의 이해와 JSX 문법

리액트의 모든 화면은 컴포넌트(Component)라는 독립적이고 재사용 가능한 조각들로 구성됩니다. 헤더, 사이드바, 버튼 하나조차도 모두 컴포넌트로 만들어 조립할 수 있습니다.

이러한 컴포넌트를 만들기 위해 리액트는 JSX (JavaScript XML)라는 특수한 문법을 사용합니다. 자바스크립트 코드 안에 HTML 마크업을 자연스럽게 섞어 쓸 수 있게 해주어 UI 개발을 직관적이고 즐겁게 만들어줍니다.

💡 핵심 비유: 레고 조립 설명서 (JSX)

완성된 거대한 성(웹사이트)은 수많은 크고 작은 레고 블록(컴포넌트)들이 모여 만들어집니다.
그리고 JSX는 어떤 블록을 어떻게 꽂아야 하는지 설명해 주는 직관적인 조립 설명서와 같습니다. 자바스크립트라는 언어로 그림(HTML)을 그리듯 편하게 코딩할 수 있습니다.

⚙️ JSX의 실제 동작 원리 (Babel 컴파일)

📋 반드시 지켜야 할 JSX 3대 규칙

규칙	설명	올바른 예시
1. 최상위 요소는 단 하나!	리턴되는 모든 태그는 반드시 하나의 부모 태그로 감싸져야 합니다. (의미 없는 태그는 Fragment `<></>` 사용)	`<> <h1>안녕</h1> <p>반가워</p> </>`
2. 닫는 태그 필수	HTML에서는 열린 채로 두었던 `<img>`, `<br>` 태그도 JSX에서는 무조건 닫아야 합니다.	`<img src="img.jpg" />`
3. class 대신 className	JS 예약어와의 충돌을 피하기 위해 HTML의 class 속성은 `className`으로 적어야 합니다.	`<div className="title">`

 <div id="root"> <div class="card-container" id="mock-react-mount">  </div> </div>

규칙

설명

올바른 예시

1. 최상위 요소는 단 하나!

리턴되는 모든 태그는 반드시 하나의 부모 태그로 감싸져야 합니다. (의미 없는 태그는 Fragment <></> 사용)

<> <h1>안녕</h1> <p>반가워</p> </>

2. 닫는 태그 필수

HTML에서는 열린 채로 두었던 <img>, <br> 태그도 JSX에서는 무조건 닫아야 합니다.

<img src="img.jpg" />

3. class 대신 className

JS 예약어와의 충돌을 피하기 위해 HTML의 class 속성은 className으로 적어야 합니다.

<div className="title">