JSX.Element와 ReactElement 차이 이해하기

대표이미지

리액트를 사용하며 ReactElement와 JSX.Element는 같은 의미로 사용되곤 합니다. 하지만 이 두 개념에는 개발자가 이해해야하는 중요한 차이점이 있습니다.

ReactElement

ReactElement는 리액트 라이브러리에서 저수준의 UI 컴포넌트를 가리키는데 사용합니다. ReactElement는 컴포넌트의 props , 그리고 자식들(children)을 의미하는 객체입니다. ReactElement는 React.creatElement 메소드를 통해 만들 수 있으며, React.creatElement는 컴포넌트의 타입, props , 그리고 그의 자식들을 인수로 받습니다.

JSX.Element

반면에 JSX.Element 는 JSX 문법으로 생성된 element를 의미하는 타입입니다. JSX 문법은 개발자가 리액트에서 HTML처럼 보이는 방식으로 컴포넌트를 작성할 수 있도록 하는 문법입니다. JSX 로 작성된 컴포넌트가 컴파일되면 React.createElement호출의 연속으로 변환됩니다. 여기서 JSX 로 생성된 요소의 타입은 JSX.Element 입니다.

예시

ReactElement와 JSX.Element를 설명하기 위한 짧은 예시입니다.

먼저 ReactElement 를 보는 예시입니다.

const user = {
  name: 'Sung Ho',
  age: 30
};

const UserComponent = (props) => {
  return React.createElement(
    'div',
    {},
    React.createElement(
      'h1',
      {},
      props.name
    ),
    React.createElement(
      'p',
      {},
      `Age: ${props.age}`
    )
  );
};

const userElement = React.createElement(UserComponent, user);

위의 예시에서 userElement 는 UserComponent 나타내는 ReactElement 입니다. 이 ReactElement 는 ReactDOM.render 메소드를 통해 DOM으로 렌더링될 수 있습니다.

다음으로 JSX.Element의 예시를 보겠습니다.

const UserComponent = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
};

const userElement = <UserComponent {...user} />;

이 예시 또한 userElement 는 UserComponent 를 나타냅니다. 하지만 JSX.Element 타입인 것을 볼 수 있습니다. (이 코드가 컴파일 되었을 때는 첫 번째 예시처럼 ReactElement 로 변환될 것입니다.)

마무리

ReactElement와 JSX.Element은 모두 리액트에서 UI 컴포넌트를 나타내는 타입입니다.

• ReactElement는 리액트의 기본 타입으로, 컴포넌트 또는 HTML tag(React DOM component)를 나타냅니다.
• JSX.Element 는 리액트의 확장 타입으로, JSX 문법으로 작성된 component를 나타냅니다.

두 타입 모두 동일한 역할을 하지만, JSX.Element 타입은 보다 구체적으로 component가 JSX로 작성되었음을 나타냅니다. 따라서 JSX.Element 타입을 사용하면 코드의 가독성이 높아지고, 타입 추론이 더 쉬워질 수 있습니다.