[React] JSX / TIL # 37

React에서 사용되는 문법 JSX에 대해서 알아보자

리액트 공식 문서를 정리한 글입니다

JSX

자바스크립트에서 HTML 요소를 적는 자바스크립트를 확장한 문법이며 React Element를 생성한다
React에서 가독성, 생산성등의 이유로 많이 사용된다

const element = <h1>Hello</h1>;

표현식 넣기

JSX는 {}을 통해 표현식을 넣을 수 있다

const name = "JCY";
const element = <h1>Hello, {name}</h1>;

JSX은 JavaScript 객체

컴파일 후 JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다
때문에 if, for문에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다

JSX 속성 정의

문자열 리터럴 사용 정의 가능

const element = <div className="box"></div>

중괄호를 사용해 표현식 삽입 가능

const element = <img src={user.avatarUrl}></img>;

JSX는 CamelCase를 사용함 (ex. className)

JSX는 사용자 입력에 안전하다

React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 사용자 입력에 안전하고, XSS 공격(웹 사이트 관리자가 아닌 이가 웹 사이트에 악성 스크립트를 삽입)을 방지 할 수 있다

JSX는 React.createElement()로 컴파일 된다

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Babel이 JSX를 React.createElement()호출로 컴파일 하기 때문에 위 두 코드는 같다

그리고 React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 다음과 같은 객체를 생성한다

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

위 객체를 'React Element'라고 하며 화면에서 보고 싶은 것을 나타내는 표현이다 라고 생각하면 된다

출처 : 리액트 공식 문서