React Jsx 🌱

jsx는 React.createElement를 반환하기 위한 Syntatic sugar 입니다.

Syntatic Sugar은 좀 더 편리하게 사용하기 위해 도와주는 것으로 이해할 수 있습니다.

예를 들면 Javascript의 class, React의 jsx가 있습니다.

 

javascript의 Class는 babel로 변환해 보면 prototype으로 구성되어 있음을

React의 jsx는 bable로 변환해 보면 React.createElement를 반환함을 확인할 수 있습니다.

둘다 원래는 직접 prototype, React.createElement로 작성해야 했던것을 Class, jsx를 사용함으로써 편리하게 사용할 수 있는 것이죠

 

class를 babel로 변환한 모습

jsx를 babel로 변환한 모습

jsx는 클래스형 컴포넌트에서 사용합니다. render내부에서 return 되면 됩니다.

 

공식문서에 나와있는 설명을 약간 곁들이겠습니다

JSX는 Javascript를 확장한 문법입니다. 
JSX는 React "엘리먼트(element)"를 생성합니다. 

 

아래의 설명또한 공식 문서에 나와있는 설명입니다.

 

JSX도 표현식입니다.

 

컴파일이 끝나면, JSX 표현식이 정규 Javascript 함수 호출이 되고 Javascript객체로 인식됩니다.

즉 JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

function getGreeting(user){
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>
  }
  return <h1>Hello, Stranger</h1>
}

 

공식문서에서는 JSX는 HTML보다는 javascript에 가깝기 때문에 jsx내에서 javascript에서 프로퍼티를 명명하는 규칙인 camelCase를 따른다 합니다. 그래서 className, style내부의 속성들에서도 backgroundColor와 같이 사용하여야 한다고 합니다!!

 

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


const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
)

 

 

결론: JSX는 React 엘리먼트를 생성하는 Syntatic Sugar 이다!!!

 

출처: https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React