react - JSX란 무엇일까??

const element = <h1>Hello, world!</h1>;

이 요상한 문법을 뭘까?  이건 문자열도 아니고 HTML도 아니다..

 

JSX라고 불리는 javascript를 확장한 문법!! 

 

UI가 어떻게 생기는지를 설명하기위해 react와 함께 쓰이길 권장하는 문법이다.

 

 

JSX는 react element를 생성하는데!  react element란?

 

이러한 모양의 JSX는

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

이러한 구조의 react element를 생성한다!

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

---

자 그럼 다시 돌아와서!

 

JSX란??

 

흠.. jsx관련해서 정리하기에는 의미가 별로 없고 react 공식 document의 url에서 확인하자!

 

reactjs.org/docs/introducing-jsx.html

Introducing JSX – React