3.JSX - 1)JSX의 정의와 역할

정의

• JavaScript(JS) + XML/HTML
• A syntax extension to JavaScript
• 자바스크립트의 확장 문법

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

• Javascript 변수를 선언하고, html태그를 변수값으로 넣었다

역할

• 내부적으로 xml/html코드를 javascript로 변환해주는 과정을 거친다
• JSX로 작성을 해도 최종적으로 javascript로 변환해 나오게 된다

  ex)
  	React.createElement(
          type,
          [props],
          […children]
      )

  createElement() -> xml/html코드를 javascript로 변환해주는 함수

JSX를 사용한 코드

ex)	const element = (
        <h1 className=“greeting”>
                Hello, world!
        </h1>
    )

JSX를 사용하지 않은 코드

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

React.createElement()의 결과로 아래와 같은 객체가 생성

ex) const element = {
        type: ‘h1’,#엘리먼트 유형 : 태그명, 다른 리액트 컴포넌트
        props:{	# 프롭스 : 속성
            className:’greeting’,#엘리먼트가 포함하고 있는 자식 엘리먼트
            children:’Hello, world!’
        }
    }

@때문에, 리액트에서 JSX를 쓰는 것이 필수는 아님

• 다만 JSX를 사용하면 편리해진다