✅ JSX(JavaScript XML)란?

JSX는 JavaScript 내부에서 HTML을 작성할 수 있게 해주는 확장 문법입니다.

React에서 UI를 직관적이고 선언적으로 작성할 수 있도록 도와줍니다.

🔷 1. JSX의 기본 개념

JSX는 다음과 같은 코드 형태를 가집니다.


1const element = <h1>Hello, world!</h1>;

위 JSX 코드는 Babel과 같은 도구에 의해 다음 JavaScript 코드로 변환됩니다:


1const element = React.createElement('h1', null, 'Hello, world!');

JSX를 사용할 때 실제로는 다음 단계가 수행됩니다:

① JSX 코드 작성


1<div className="container">
2  <h1>Hello</h1>
3  <button onClick={handleClick}>Click</button>
4</div>

▼ 변환(Babel 등을 통해 변환)


1React.createElement('div', null, React.createElement('h1', null, 'Hello, world!'));

JSX는 기본적으로 다음 함수 호출로 변환됩니다.


1React.createElement(
2  type, // 태그 이름이나 컴포넌트
3  [props], // 속성(props) 객체
4  [...children], // 자식 요소
5);

📌 예시

다음 JSX 코드를 살펴봅시다.


1<MyComponent color="red">Hello, world!</MyComponent>

이 코드는 다음과 같은 JavaScript로 변환됩니다.


1React.createElement(MyComponent, { color: 'red' }, 'Hello, world!');

JSX에서 속성을 지정하면 React는 객체로 변환하여 컴포넌트에 전달합니다.


1// JSX
2<MyComponent isActive={true} name="React" />


1// 변환된 형태
2React.createElement(MyComponent, { isActive: true, name: 'React' });

JSX를 사용하기 위해선 빌드 도구가 필요합니다. 주로 Babel이 사용됩니다.

✅ 설치

npm install @babel/core @babel/preset-react

✅ JSX 컴파일 예시


1<div className="container">
2  <h1>Hello, React!</h1>
3</div>


1React.createElement('div', { className: 'container' }, React.createElement('h1', null, 'Hello, React!'));

React는 컴포넌트 간의 데이터를 단방향으로 전달하기 위해 props를 사용합니다.


1function Parent() {
2  const [message, setMessage] = useState('Hello from Parent!');
3
4  return <Child message={message} />;
5}


1function Child({ message }) {
2  return <div>{message}</div>;
3}

데이터는 위에서 아래로만 흐르며, 하위 컴포넌트에서는 전달받은 데이터를 변경할 수 없습니다.

JSX를 사용하는 React 프로젝트는 보통 아래 도구로 설정됩니다.

JSX를 JavaScript로 변환하는 역할

여러 JavaScript 파일 및 리소스를 번들링하고 최적화하여 제공합니다.

위 설정을 간편하게 포함하여 즉시 사용 가능한 환경 제공