[빡공단 41기] JSX란 ?

JSX: 리액트의 강력한 확장 문법

리액트에서 컴포넌트를 작성할 때 우리는 JSX라는 특별한 문법을 사용한다. 

JSX는 자바스크립트의 확장 문법으로, 

HTML 태그처럼 생겼지만 실제로는 자바스크립트이다.

이것은 리액트가 제공하는 컴포넌트를 편리하게 작성하고 사용할 수 있도록 돕는 독자적인 문법이다.

 

---

JSX의 특징

1. HTML과 자바스크립트의 결합

JSX는 자바스크립트의 확장 문법으로, 

자바스크립트 코드 안에서 HTML 태그를 사용할 수 있게 해준다.

 

2. Babel을 통한 컴파일

리액트 애플리케이션은 JSX 코드를 브라우저가 이해할 수 있는 

일반적인 자바스크립트 코드로 변환해야 한다. 

이때 Babel이라는 도구를 사용하여 JSX를 자바스크립트로 컴파일한다.

 

3. 태그의 닫힘

HTML과 마찬가지로 JSX에서도 열린 태그는 반드시 닫혀야 한다.

 self-closing 태그도 가능하며, 열린 태그와 닫힌 태그를 한 번에 쓸 수 있다.

 

4. 여러 태그 감싸기

두 개 이상의 JSX 태그를 사용할 때는 반드시 하나의 부모 요소로 감싸주어야  한다.

리액트는 이를 위해 Fragment 태그를 제공한다.

예제 코드

import React from 'react';

const MyComponent = () => {
  return (
    <React.Fragment>
      <h1>Hello, React!</h1>
      <p>This is a sample component using JSX.</p>
    </React.Fragment>
  );
};

 

5. 주석 사용하기
JSX에서 주석은 {/* */} 안에 작성된다.

주석은 코드의 가독성을 높이고 필요한 설명을 추가하는 데 유용하다.

const CommentedComponent = () => {
  return (
    <div>
      {/* This is a comment in JSX */}
      <p>Hello, World!</p>
    </div>
  );
};

JSX는 리액트의 강력한 기능 중 하나이며, 컴포넌트를 보다 효율적으로 작성할 수 있도록 도와준다.

JSX를 잘 활용하여 리액트를 효율적으로 사용해보자 !