[리액트] JSX

JSX란?

• 자바스크립트의 확장형 문법

• Javascript + XML/HTML

JSX의 원리

• JSX는 내부적으로 XML/HTML 코드를 Javscript로 변환하는 과정을 거침

• React.createElement() → JSX를 JS코드로 변경하고 결과값으로 자바스크립트 객체(React element)를 반환

React.createElement()

    React.createElement(
    	type, // element의 유형(html 태그 or 다른 react component)  
    	[props], // 속성
    	[...children] // 현재 element가 포함하고 있는 자식 element
    )

• JSX 문법의 코드는 리액트에서 내부적으로 모두 React.createElement()를 사용하는 형태로 변환됨

/* Not JSX */
const element = React.CreateElement(
  'h1',
  {className:'greeting'},
  'Hello, World!'
)
	
/* Using JSX */
const element = <h1 className = "greeting"> Hello, World! </h1>

// JSX의 형태가 HTML과 유사하여 개발자 입장에서는 익숙함.
// 직접 만든 컴포넌트의 첫 글자는 반드시 대문자로 시작해야 함.
// 소문자로 시작 시 JSX는 html 태그로 인식해버림.

JSX의 장점

• 직관적이고 간결한 코드 → 가독성 향상

• Injection Attacks 방어

인용 자료 출처
처음 만난 리액트