리액트에서 JSX 문법 어떻게 사용되는가

JSX(JavaScript XML)는 JavaScript를 확장한 문법으로, React에서 UI를 표현하기 위해 사용된다

JSX는 HTML과 비슷하게 생겼지만, 실제로는 JavaScript다

React의 createElement 함수 호출로 변환되며, 이를 통해 React 엘리먼트를 생성한다

JSX를 사용하면 UI 구조를 명확하고 직관적으로 작성할 수 있으며, JavaScript의 표현력을 그대로 활용할 수 있다

태그 사용:
- HTML과 유사한 태그를 사용하여 컴포넌트를 렌더링할 수 있다
- 태그는 대소문자를 구분하며, React 컴포넌트는 대문자로 시작한다
JavaScript 표현식:
- 중괄호 {} 안에 JavaScript 표현식을 넣어 JSX 안에서 변수 값을 삽입하거나, 조건부 렌더링, 리스트 렌더링 등을 수행할 수 있다
속성 정의:
- JSX에서 속성을 정의할 때는 HTML과 유사하게 이름과 값을 사용한다
- JavaScript 예약어와 충돌을 피하기 위해 className을 사용하여 CSS 클래스를 지정하고, htmlFor을 사용하여 label의 for 속성을 지정한다
자식 요소:
- 태그 안에 다른 태그를 넣어 자식 요소를 정의할 수 있다
- 이를 통해 컴포넌트의 계층적 구조를 표현할 수 있다

const name = 'World';
const element = <h1>Hello, {name}</h1>;

위 예시에서는 h1 태그 안에 JavaScript 변수 name의 값을 삽입하여,

"Hello, World"라는 텍스트를 가진 React 엘리먼트를 생성한다

리스트 렌더링 예시:

const names = ['Alice', 'Bob', 'Charlie'];
const listItems = names.map((name) => <li key={name}>{name}</li>);

조건부 렌더링 예시:

const isLoggedIn = true;
const greeting = <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>;

JSX는 브라우저에서 직접 실행될 수 없다

따라서 Babel과 같은 트랜스파일러를 사용하여 일반 JavaScript 코드로 변환해야 한다

예를 들어, 위의 element는 다음과 같은 JavaScript 코드로 변환된다

const element = React.createElement('h1', null, 'Hello, ', name);

JSX를 사용하면 React에서 UI를 선언적으로 표현할 수 있으며,

애플리케이션의 구조를 쉽게 이해하고 관리할 수 있다