JSX

what is JSX?

+) JSX, JSX in depth 

 

Javascript XML | jsx는 자바스크립트 코드 안에서 html 태그를 작성할 수 있게 해 준다. 

 

JSX는 자바스크립트 안에 속하는 개념으로, 자바스크립트를 html과 비슷한 문법으로 사용할 수 있게 만들어 주는 확장된 문법이다. React라는 라이브러리에서 jsx 문법을 순수 자바스크립트 코드로 변환해 주며, 최신 리액트 프로젝트에서는 import react 구문을 생략해도 jsx가 정상적으로 변환된다.

 

import Expenses from './components/Expenses';

function App() {
 return (
  <div>
    <h1 className="greeting">
      Hello, world!
    </h1> 
    <Expenses expenses={expenses} />
  </div>
);
}

 

일반적으로 컴포넌트를 만들 때 사용하는 방식이다. 

 

import React from 'react'; // 생략 가능
import Expenses from './components/Expenses/Expenses';

/*
createElement(
  rootElement, 
  {attribute: value}, 
  childContent1,
  childContent2, ...,
)
*/ 

function App() {
 return (
  React.createElement(
    'div',
    {},
    React.createElement('h1', {className: 'greeting'}, 'Hello, world!'), 
    React.createElement(Expenses, {expenses: expenses}, ) // 컨텐츠가 없기 때문에 세번째 인자 생략 
  );
);
}

 

 

1. 첫번째 예제 코드가 위의 코드로 변환된다.
2. createElement 함수가 첫번째 인자로 rootElement를 받기 때문에, jsx 컴포넌트 함수는 형제 요소를 반환할 수 없는 것이다. 
3. html 태그에 사용되는 속성값은 예약어이기 때문에 jsx에서 직접 사용할 수 없다. 
   • class => className
   • onclick => onClick