JSX 기초

JSX란 무엇인가?

JSX는 JavaScript에서 XML과 유사한 구문을 사용하여 React 컴포넌트를 작성하는 방식입니다. JSX는 JavaScript와 HTML의 장점을 결합하여 UI를 보다 직관적으로 구성할 수 있게 해줍니다. React는 이를 JavaScript로 변환하여 렌더링합니다.

1. JSXElement

JSXElement는 HTML 태그와 비슷한 구조를 가지며, React 컴포넌트에서 화면 요소를 표현하는 데 사용됩니다. 커스텀 컴포넌트를 정의할 때는 이름이 대문자로 시작해야 인식됩니다.

• JSXOpeningElement: 컴포넌트의 시작 태그 <JSXElement>
• JSXClosingElement: 컴포넌트의 종료 태그 </JSXElement>
• JSXSelfClosingElement: 내용 없이 닫히는 태그 <JSXElement />
• JSXFragment: 여러 컴포넌트를 묶어 반환할 때 사용 <> </>

const element = <div>Hello</div>; // JSXOpeningElement와 JSXClosingElement
const selfClosing = <img src="image.jpg" />; // JSXSelfClosingElement

 

2. JSXAttributes

JSXElement는 HTML 태그처럼 속성을 가질 수 있습니다. 속성 값은 문자열, JavaScript 표현식 또는 다른 JSXElement로 설정할 수 있습니다.

• JSXAttribute: key={value} 형태로 속성을 설정합니다.
• JSXSpreadAttribute: 객체의 속성을 펼쳐서 여러 속성을 한 번에 적용할 수 있습니다. {...props} 형태로 사용됩니다.

const inputElement = <input type="text" placeholder="Enter text" />;
const buttonProps = { type: 'submit', className: 'btn' };
const submitButton = <button {...buttonProps}>Submit</button>;

3. JSXChildren

JSXElement는 자식 요소를 가질 수 있으며, 이 자식 요소들은 텍스트나 다른 JSX 요소들이 될 수 있습니다. 중괄호 {}를 사용하면 표현식을 통해 동적으로 자식을 렌더링할 수 있습니다.

• JSXText: "simple text"와 같이 일반 텍스트로 표시됩니다.
• JSXChildExpression: 중괄호 {} 안에 표현식을 사용하여 조건부로 렌더링을 제어할 수 있습니다.
   

const elementWithChildren = (
  <div>
    <h1>Hello, World!</h1>
    <p>{user.name ? user.name : "Guest"}</p> {/* JSXChildExpression */}
  </div>
);

4. JSX는 어떻게 자바스크립트로 변환될까?

JSX는 Babel을 통해 JavaScript 코드로 변환됩니다. 예를 들어:

 

const ComponentA = <A required={true}>Hello World</A>;

 

var ComponentA = React.createElement(A, { required: true }, "Hello World");

 

즉, JSX는 React.createElement 함수를 사용해 JavaScript 객체로 변환되며, 이를 통해 React는 가상 DOM에 렌더링할 UI 구조를 만듭니다.

JSX의 장점

1. 직관적인 UI 구성: HTML과 유사한 문법으로 UI를 구성하기 쉬워집니다.
2. 동적인 렌더링: JavaScript 표현식을 활용하여 유연한 렌더링을 할 수 있습니다.
3. 가독성: 복잡한 UI도 간결하게 작성할 수 있어 코드의 가독성을 높여줍니다.