JSX 란?

JSX : A syntax extension to JavaScript

→ 자바스크립트의 확장 문법

     즉, 자바스크립트의 문법을 확장시킨 것

 

 

JSX 는 JavaScript 와 XML, HTML 을 합친 것이라고 보면 된다.

JSX 의 X 는 extension 의 X 로 볼 수도 있지만, 실제로는 JavaScrpt and XML 의 앞 글자를 따서 JSX 라고 부르는 것이다.

---

 

JSX 코드는 이렇게 좌측의 JS 코드와 우측의 HTML 코드가 결합되어 있는 형식으로 작성한다.

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

- 이 코드는 h1 태그로 둘러쌓인 문자열을 element 변수에 저장하는 역할을 한다.

---

 

JSX는 내부적으로 HTML, XML 코드를 JavaScript 로 변환하는 과정을 거치게 된다.

그렇기 때문에 우리가 JSX 형식으로 코드를 작성해도, 마지막에는 JS 형식의 코드로 나오는 것이다. 

여기서 JSX 코드를 JS 코드로 변환하는 역할을 해주는 것이 React 의 createElement 라는 함수이다.

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

아직 Element 라는 개념에 대해 배우지 않았기 때문에, 일단 createElement() 라는 함수의 역할에만 주목해보자

 

먼저 JSX 로 작성한 이 코드를 보자

class Hello extends React.Component {
	render() {
    	return <div>Hello {this.props.toWhat}</div>
    }
}

ReactDOM.render(
	<Hello toWhat = "World" />,
    document.getElementById('root')
);

 이 코드를 보면 Hello 라는 이름을 가진 React Component 가 나오고,

Component 내부에서 JS 와 HTML 코드가 결합된 JSX 를 사용하는 것을 볼 수 있다.

그리고 이렇게 만들어진 Component 를 ReactDOM 이 render() 함수를 사용해서 실제 화면에 렌더링하고 있다.

 

이번에는 JSX 를 사용하지 않은 코드를 보자

class Hello extends React.Component {
	render() {
    	return React.createElement('div', null, 'Hello ${this.props.toWhat}');
    }
}

ReactDOM.render(
	React.createElement(Hello, { toWhat: 'World' }, null),
    document.getElementById('root')
);

이 코드는 순수한 JS 만을 사용하여 위의 코드와 완전히 동일한 역할을 하는 코드이다.

이 코드에서는 Hello Component 내부에서 JSX 를 사용했던 부분이 React.createElement() 함수로 대체된 것을 알 수 있다.

 

결국 JSX문법을 사용하면,

React 에서는 내부적으로 모두 createElement() 라는 함수를 사용하도록 변환하게 되는 것이다.

그리고 최종적으로는 이 createElement() 함수를 호출한 결과로 JS 객체가 나오게 된다.

 

 

비교하기 쉽게 JSX 를 사용한 코드와 사용하지 않은 코드를 한번에 작성해 보았다.

// JSX를 사용한 코드
const element = (
	<h1 className = "greeting">
    	Hello, world!
    </h1>
)

// JSX를 사용하지 않은 코드
const element = React.createElement(
	'h1',
    { className: 'greeting' },
    'Hello, world!'
)

이 두 개의 코드는 모두 동일한 역할을 한다.

JSX 를 사용한 코드도 내부적으로는 createElement() 함수를 사용하도록 변환되기 때문이다.

 

그리고 createElement() 함수를 호출한 결과로 아래의 코드와 같은 JS 객체가 나오게 되는데,

// React.createElement()의 결과로 생성된 JS 객체
const element = {
	type: 'h1',
    props: {
    	className: 'greeting',
        children: 'Hello, world!'
    }
}

React 는 이 객체들을 읽어서 DOM 을 만드는데 사용하고 항상 최신 상태로 유지한다.

React 에서는 이 객체를 element 라고 부른다.

---

그렇다면 createElement() 함수의 파라미터로는 어떤 것이 들어갈까?

React.createElement(
	type, // element의 유형
    [props], // 속성
    [...children] // 현재 element가 포함하고 있는 자식 element
)

첫 번째 파라미터 type 은 element 의 유형을 나타내며 div 나 span 같은 HTML 태그가 올 수도 있고,

다른 react component 가 들어갈 수도 있다.

두 번째 파라미터 props 는 우리가 아직 배우지 않은 개념이기 때문에 일단 속성들이 들어간다고 기억해두자

세 번째 파라미터 children 은 현재 element 가 포함하고 있는 자식 element 라고 보면 된다.

 

리액트는 이런식으로 JSX 코드를 모두 createElement() 함수를 사용하는 코드로 변환한다.

그렇기 때문에 리액트에서 JSX 를 사용하는 것이 필수는 아니다.

직접 모든 함수를 createElement() 함수를 사용하여 개발하면 되기 때문이다.

 

다만 JSX 를 사용하면 

1. 코드가 더욱 간결해지고

2. 생산성과 가독성이 올라가기 때문에

사용하는 것을 권장한다.