[JSX]: JS와 JSX 확장자는 무엇이 다를까?

 

JSX: Javascript XML

1) Javascript에서 HTML을 사용할 수 있게 하는 리액트만의 문법(syntax)을 말한다.

2) html안에 변수를 넣으려면 { }로 감싼다.

3) html의 attribute를 다르게 쓴다. class대신 className, onclick대신 onClick 등

 

JSX는 react 파일의 확장자로써의 상징적인 의미를 갖는다.

ECMAScript가 Javascript의 표준과 규격등 문법에 관해 사용할 때 쓰는 것처럼, JSX도 JS의 파일에 React 라이브러의 표준을 따른다는 의미로써 사용되는 확장자다. 다만, 둘을 구분지으면서 얻는 이익이 딱히 없고, JS파일에 JSX로 코드를 작성하면, CRA와 같은 툴체인에 의해 JS 코드로 변환해주기 때문에 실제로 구분해서 사용하지 않는다.

React 17버전 부터는 import React from "react"를 생략한다.

예전코드

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

Under the hood, the old JSX transform turns it into regular JavaScript:

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

바뀐 코드

function App() {
  return <h1>Hello World</h1>;
}

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });

import React from "react" 를 쓰지 않아도 이젠, 컴파일러가 알아서 jsx코드를 js로 바꿔준다.

이젠 JSX코드를 사용하기 위해 react를 import하지 않아도 된다. 하지만 hooks이나, Componet등 react가 제공하는 exports를 사용하기 위해선 필요하다.

 

JSX 문법 살펴보기

https://ko.reactjs.org/docs/jsx-in-depth.html

JSX 이해하기 – React