blog.holy.kiwi

🏊 React의 JSX 파고들기

January 20, 2019 • ☕️ 7 min read

😻 JSX가 대체 뭐지

const element = <div>Hello world</div>;

React를 처음 접할 때, 보통의 자바스크립트와는 다른 문법을 볼 수 있다. 위 코드를 보면 변수에 <div>Hello world</div>를 할당하고 있는데 이는 문자열도 아니고, HTML도 아니다. 바로 JSX다.

JSX는 JS + XML의 줄임말로써 자바스크립트 안에서 <div>hello world</div> 와 같이 HTML 같이 생긴 XML 문법을 사용할 수 있는 자바스크립트에서 확장된 파일형식이다. 나는 React의 JSX를 처음 보고 정말 참신하다고 생각했다. UI에 해당하는 HTML과 로직에 해당하는 Javascript를 나누지 않고 JSX라는 파일형식을 창조하여 컴포넌트 단위로 UI와 로직을 한 파일에 합쳤기 때문이다.

물론 React에서 JSX를 사용하지 않을 수 있다. 하지만, Javascript 코드 안에서 UI가 동작하는 것을 시각적으로 바로 볼 수 있기 때문에 많은 사람들이 사용한다.

다음은 React에서 JSX의 예제이다.

class AwesomeComponent extends React.Component {
    render() {
        return (
            <MyButton color="blue" shadowSize={2}>
                Click Me
            </MyButton>
        );
    }
}

위 JSX 코드는 아래와 같이 컴파일된다.

class AwesomeComponent extends React.Component {
    render() {
        return React.createElement(
            MyButton,
            { color: "blue", shadowSize: 2 },
            "Click Me"
        );
    }
}

온라인 바벨 컴파일러에서 위 내용을 확인할 수 있다.

🍎 JSX를 사용할 때 주의할 점들

JSX를 사용하려면 React가 Scope 안에 있어야 한다.

XML 형식의 코드는 React.createElement 함수를 호출하는 코드로 컴파일되기 때문에 React를 직접 쓰지 않더라도 React를 임포트해주어야 한다.

import React from 'react';
import AwesomeButton from './AwesomeButton';

function BlueButton() {
  // return React.createElement(AwesomeButton, {color: 'blue'}, null);
  return <AwesomeButton color="blue" />;
}

최상위 부모 DOM은 하나여야 한다.

React.createElement 함수의 인자는 React.createElement(component, props, ...children)와 같다. 첫번째 인자에 component가 오고, 두번째에는 Object 형식의 props가 오고 세번째 인자는 가변인수로 children들이 온다. 여기서 중요하게 봐야할 점은 최상위 부모 DOM이다. 최상위에서 제일 처음 호출되는 React.createElement는 단 하나만이 호출되기 때문에 최상위 부모 DOM은 오로지 하나여야 한다.

// 나쁜 예: 최상위 부모 DOM이 두 개이다. 컴파일할 수 없다.
function BadComponent() {
    return (
        <div>hello</div>
        <div>world</div>
    );
}

// 좋은 예: 최상위 부모 DOM이 한 개이다.
function GoodComponent() {
    return (
        <div>
            <div>hello</div>
            <div>world</div>
        </div>
    );
}

// 위 GoodComponent.jsx를 컴파일한 GoodComponent.js
function GoodComponent() {
    return React.createElement(
        "div",
        null,
        React.createElement(
            "div",
            null,
            "hello"
        ),
        React.createElement(
            "div",
            null,
            "world"
        )
    );
}

직접 정의한 컴포넌트는 대문자로 시작해야 한다.

React는 소문자로 시작하는 컴포넌트를 HTML tag로 인지하기 때문에 대문자로 시작하는 네이밍을 사용해야 한다. 이는 보통 클래스는 대문자로 시작하는게 관습이므로 신경쓰지는 않아도 될듯 싶다.

props를 사용할 때 스프레드 연산자를 사용할 수 있다.

props를 Object type으로 정의하여 <Greeting {...props} />와 같이 사용할 수 있다. 부모 컴포넌트의 props를 자식 컴포넌트에서 그대로 자식 컴포넌트에게 물려줄 때 유용하게 사용할 수 있다.

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Children에 Javascript의 표현식을 사용할 수 있다.

배열에 있는 아이템을 차례대로 <li></li>로 보여주고 싶을 때 Javascript의 map을 사용하면 쉽게 처리할 수 있다.

function TodoList() {
  const todoItems = ['You don\'t know JS 책 읽기', '깃헙 커밋하기', '블로그 포스팅하기'];
  return (
    <ul>
      {todoItems.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
  );
}

boolean, undefined, null은 렌더되지 않는다.

true, false undefined, null은 렌더되지 않기 때문에 이 특징을 사용하여 아래와 같이 쓸 수 있다.

// 좋은 예
<div>
  {showHeader && <Header />}
  <Content />
</div>

/* NOPE. 하지만 아래와 같이 사용하게 되면 props.messages.length이 0일 때
falsy한 값으로 뒤의 값들이 나오지 않겠지만 0이 렌더되기 때문에 옳은 방법은 아니다. */
<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

// OK. 이와 같이 바꿔주어야 한다.
<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

React 코드 살펴보기

React 16.4.0 버전의 코드를 살펴보겠다. ReactElement.js 파일에서 createElement를 정의하는 코드이다.

export function createElement(type, config, children) {

  // ... 중략

  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

React.createElement 함수는 ReactElement라는 자료형으로 반환하는 것을 볼 수 있다.

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

  // ... 중략

  return element;
};

위 코드를 통해 ReactElement 자료형은 $$typeof, type, key, ref, props, _owner를 갖는 Object인 것을 확인할 수 있다.

class AwesomeComponent extends React.Component {
    render() {
        return React.createElement(
            MyButton,
            { color: "blue", shadowSize: 2 },
            "Click Me"
        );
    }
}

따라서 위에서 JSX가 컴파일된 코드는 아래와 같이 다시 ReactElement로 반환될 것이다.

class AwesomeComponent extends React.Component {
    render() {
        return {
            type: MyButton,
            props: {
                color: 'blue',
                shadowSize: 2,
                children: 'Click Me'
            }
        }
    }
}

👱🏻 JSX는 미쳤다.

React에서 가장 중요한 개념인 Component는 UI를 구성하는 개별적인 뷰 단위이다. React로 개발한다는 것은 블록을 조합해 집을 짓는 것과 같다. React 앱은 Component들의 결합으로 만들어지는 것이다. 여기서 주의 깊게 봐야할 부분은 Component가 재사용이 가능하다는 점이다. 재사용이 가능한 React의 Component는 생산성을 극대화시켜주었다. Component를 효율적으로 만들기 위해 React는 JSX라는 특이한 Syntax를 만들어냈고 그 결과는 탁월했다. Javascript 코드 안에 태그를 넣어 사용한다는 생각은 정말로 발상의 전환이었다. 정말 미친 것 같다.

추가적으로 React의 또 하나의 가장 중요한 특징인 Virtual DOM을 빼놓을 수 없겠다. 아마 다음 포스트 주제가 될 것 같다. 🥝

참고

blog.holy.kiwi

Personal blog by Jon Jee.
I hope to explain with words and code.