JSX pragma를 사용하여 가독성 있는 코드 작성하기

05 Oct 2023

JSXpragma

일반적으로 React에서는 JSX pragma로 React.createElement를 사용합니다. 다음은 JSX pragma를 사용하여 가독성 있는 코드를 작성하는 예시입니다:

/** @jsx jsx */
import { jsx } from '@emotion/react';
// jsx pragma를 사용할 때는 @emotion/react 모듈에서 제공하는 jsx 함수를 import 합니다.

function App() {
  return (
    <div
      css={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
      }}
    >
      <h1 css={{ fontSize: '24px', color: 'blue' }}>안녕하세요!</h1>
    </div>
  );
}

export default App;

위의 코드에서 /** @jsx jsx */ 주석은 Babel이 파일을 해석할 때 jsx pragma를 사용하도록 지시하는 역할을 합니다. 그리고 jsx 함수를 import하여 JSX 구문을 JavaScript 함수 호출로 변환합니다.

이렇게 JSX pragma를 사용하면 엘리먼트의 스타일을 설정할 때 CSS-in-JS를 사용한 Emotion 라이브러리와 같이 사용할 수 있어 가독성과 유지보수성을 향상시킬 수 있습니다.