앞에서 JSX의 개념과 예시 코드를 살펴봤습니다. 그렇다면 JSX가 해주는 역할은 무엇이고 왜 사용해야 하는지 알아보도록 하겠습니다. JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치게 됩니다. 그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 자바스크립트 코드가 나오게 되는것이죠.

여기서 JSX코드를 자바스크립트 코드로 변환하는 역할을 하는 것이 바로 리액트의 createElement()라는 함수입니다. 우리가 아직 element라는 개념에 대해서 배우지 않았기 때문에 여기서는 우선 createElement()라는 함수의 역할에만 주목해보도록 하겠습니다. 먼저 아래 JSX로 짠 코드를 한 번 보도록 하겠습니다.

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

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

이 코드를 보면 Hello라는 이름을 가진 리액트 컴포넌트가 나오고, 컴포넌트 내부에서 자바스크립트 코드와 HTML코드가 결합된 JSX를 사용하고 있는 것을 볼 수 있습니다. 그리고 이렇게 만들어진 컴포넌트를 ReactDOM의 createRoot()함수를 사용해서 만든 root의 render() 함수를 사용해서 실제 화면에 렌더링 하고 있습니다. 그럼 이제 다음 코드를 한 번 보도록 하겠습니다.

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

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

위에서 살펴본 코드와 뭔가 비슷하게 생겼죠? 이 코드는 JSX를 사용하지 않고 순수한 자바스크립트 코드만을 사용해서 방금 전에 우리가 봤던 코드와 완전히 동일한 역할을 하게 만든 코드입니다. 두 코드를 비교해보면 Hello컴포넌트 내부에서 JSX를 사용했던 부분이 React.createElement()라는 함수로 대체되었습니다. 결국 우리가 JSX 문법을 사용하면 리액트에서는 내부적으로 모두 createElement()라는 함수를 사용하도록 변환하게 되는 것이죠. 그리고 최종적으로는 이 createElement()함수를 호출한 결과로 자바스크립트 객체가 나오게 됩니다. 아래 예시코드를 한 번 보도록 하겠습니다.

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

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

위 두 개의 코드는 JSX를 사용한 코드와 사용하지 않은 코드이며, 모두 동일한 역할을 합니다. JSX를 사용한 코드도 내부적으로는 createElement() 함수를 사용하도록 변환되기 때문이죠. 그리고 이 createElement() 함수의 호출 결과로 아래 그림과 같은 자바스크립트 객체가 나오게 됩니다. 그리고 리액트에서는 이 객체를 element라고 부릅니다. 함수의 이름이 createElement니까 당연히 element를 생성해서 리턴하겠죠? element에 대해서는 뒤에서 자세히 배울 예정이니 지금은 일단 그런게 있다 정도로만 알고 넘어가도록 하겠습니다.

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

그렇다면 createElement()함수의 파라미터로는 어떤 것들이 들어가는지 한 번 자세히 살펴보도록 하겠습니다. 아래 코드는 createElement()함수의 파라미터들을 나타낸 것입니다.

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

먼저 첫 번째 파라미터는 element의 유형(type)을 나타냅니다. 이 유형으로는 <div>나 <span> 같은 HTML 태그가 올 수도 있고, 다른 리액트 컴포넌트가 들어갈 수도 있습니다. 그리고 두 번째 파라미터로는 props가 들어가게 됩니다. 우리가 아직 리액트 컴포넌트의 props라는 개념에 대해서 배우지 않았기 때문에 일단은 속성들이 들어간다고만 기억해두면 됩니다. 그리고 마지막 세 번째 파라미터로는 children이 들어가는데, 여기서 children이란 현재 element가 포함하고 있는 자식 element라고 보면 됩니다.

리액트는 이런식으로 JSX코드를 모두 createElement()함수를 사용하는 코드로 변환하게 됩니다. 때문에 리액트에서 JSX를 사용하는 것이 필수는 아닙니다. 왜냐하면 직접 모든 코드를 createElement()함수를 사용해서 개발하면 되기 때문이죠. 하지만 JSX를 사용했을 때 코드가 더욱 간결해지고, 생산성과 가독성이 올라가기 때문에 대부분 사용하는 것을 권장합니다. 우리가 앞서 살펴본 두 개의 코드만 봐도 어떤게 더 쉽게 작성 가능하고 쉽게 읽히는지 알 수 있는 것처럼 말이죠. 다음에서 JSX의 장점들에 대해서 조금 더 자세히 살펴보도록 하겠습니다.