JSX는 JavaScript와 XML을 결합한 문법으로, React에서 컴포넌트를 작성할 때 자주 사용됩니다. JSX를 사용하면 보다 간편하고 가독성이 높은 코드를 작성할 수 있습니다. JSX를 사용하기 위해서는 JSX pragma를 선언해야합니다. JSX pragma는 컴파일러에게 JSX를 JavaScript로 변환할 때 사용해야하는 함수를 알려줍니다.

1. 화살표 함수 (Arrow Function)

ES6에서 소개된 화살표 함수는 함수를 더 간결하게 작성할 수 있는 문법입니다. 아래는 example 함수를 화살표 함수로 작성한 예시입니다.

const example = () => {
  return "Hello World";
}

2. 클래스 (Class)

ES6에서는 클래스 문법이 도입되었으며, React 컴포넌트를 작성할 때 주로 사용됩니다. 아래는 예시로 작성된 React 컴포넌트입니다.

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

3. 객체 분해 할당 (Object Destructuring)

객체 분해 할당은 객체의 속성을 추출하여 변수로 할당하는 문법입니다. 아래는 예시로 작성된 객체 분해 할당의 예시입니다.

const user = {
  name: "John",
  age: 25,
}

const { name, age } = user;

console.log(name); // "John"
console.log(age); // 25

4. 확장 연산자 (Spread Operator)

확장 연산자는 배열이나 객체를 복사하거나 병합할 때 사용됩니다. 아래는 확장 연산자를 사용하여 배열을 복사하는 예시입니다.

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // [1, 2, 3]

5. 모듈 기능 (Module)

ES6에서는 모듈 기능이 도입되었으며, 모듈을 사용하여 코드를 더 모듈화하고 재사용할 수 있습니다. 아래는 모듈을 사용하여 함수를 내보내고 가져오는 예시입니다.

// math.js 파일
export const add = (a, b) => {
  return a + b;
}

// index.js 파일
import { add } from './math';

console.log(add(2, 3)); // 5

이외에도 ES6에서 도입된 여러 가지 문법들을 JSX pragma와 함께 사용할 수 있습니다. 위 예시들은 JSX 컴포넌트 작성 시 가장 자주 사용되는 문법들입니다. JSX pragma와 ES6 문법을 함께 사용하여 보다 효율적이고 간결한 React 컴포넌트를 작성할 수 있습니다.

#JSX #ES6