JSX란? React 에서 사용하는 JSX 문법 | Babel

1. JSX란? React에서의 JSX

 

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

위 태그 문법은 JSX 라고 불리는 javascript를 확장한 리액트에서 차용하는 문법이다.

 

리액트와 함께 사용되는 이유는 리액트가 UI와 state 의 변화에 초점을 맞추는 라이브러리이기 때문에 자바스크립트 함수와 html 태그를 함께 사용하는 것이 효과적이기 때문이다.

 

 

즉, react 에서는 렌더링 로직이 ui로직 ( 이벤트 처리, state 변화, 데이터 준비방식) 과 밀접한 연관이 있다. 따라서 마크업인 html 태그와 함께 로직을 처리할 수 있는 JSX를 사용한다.

 

 

React에서 JSX 문법 사용이 필수는 아니지만, Javascript 코드와 함께 ui 관련 작업을 쉽게 할 수 있는 html 태그를 사용한다는 것이 리액트의 최종 목적을 달성하는데 도움을 주기 때문에 많은 개발자들이 사용한다.

 

 

2. JSX 도 표현식

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

//함수 로직을 html 태그 안에서 {} 사용가능하다.
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

 

JSX또한 표현식이라고 볼 수 있다. 리액트의 컴파일이 끝나면, JSX 표현식은 곧 Javascript 객체로 인식된다. 따라서 개발자들은 JSX 를 if , for, 변수 할당 등 표현식과 같이 사용할 수 있다. 여기서 리액트의 컴파일이란, Babel이 JSX를 React.createElement() 호출로 컴파일 하는 것을 말한다.

 

3. Babel에 의한 객체 생성

예를 들면,

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

위 JSX 문법 코드가 Babel 에 의해

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

위 코드와 함께 컴파일된다. 그러면 아래와 같은 객체가 생성되는데

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

위와 같은 자바스크립트 객체가 생성된다. React 는 해당 객체를 읽은 후 virtual DOM을 구성하고 효율적으로 최신 상태로 유지한다.

 

 

 

 

+ 또한 jsx도 html과 같이 태그 안에 attribute 를 정의할 수 있다.

 

```jsx
const element = <a href="https://www.reactjs.org"> link </a>;
```

참고: https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React