[3# JavaScripteXtension_ JSX] JSX란? JS with HTML

목차 :

1. JSX?

2. 문법

---

 

1. JSX?

JSX는 JavaScript eXtension으로 JS 확장을 의미한다.
기존 JS에서 HTML 문법을 작성할 수 있다.

React에서 Component를 만들 때 유용하게 쓰인다.

 

React App을 만들 때 필요한 babel이 JSX를 JS로 변환해주는 역할 수행하므로

JS 기반인 React에서 구동이 되며 파일 확장자는 .jsx 지만 .js 확장자로 파일을 생성해도 무관하다.

 

 

2. 문법

JSX에서 HTML의 모든 Tag들은 닫아줘야한다. 

HTML에서 <a ....> , <img src="... >등과 같은 경우 <a .... /> 와 같이 self-closing해줘야하며 

우리는 이를 self-closing Tag라 부른다.

 

Component에서 return문 안에 있는

JSX는 꼭 단일 최상위 부모 안에 존재해야하며 예를 들면 아래와 같다.

import React from 'react';

// 함수 컴포넌트 정의
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a React component.</p>
    </div>
  );
}

export default MyComponent;

여기서 <h1> 과 <p>는 하나의 <div> 안에 존재하며 return은 단일 <div> 하나만 리턴한다.

부모가 불필요한 경우 <> 혹은 React.Fragement로 감싸주면 해결된다.

 

JSX에서 사용되는 {}는 외부 변수 혹은 props를 전달해줄 수 있는 곳으로

{} 괄호 안에는 숫자, 문자, 간단한 식이 포함될 수 있으며  [ ... ] 와 같은 배열은 포함될 수 없다.