JSX pragma를 활용하여 모바일 애플리케이션 개발하기

05 Oct 2023

JSXpragma

React Native는 JavaScript와 JSX를 사용하여 모바일 애플리케이션을 개발할 수 있는 강력한 프레임워크입니다. JSX는 JavaScript의 확장 문법으로, UI 컴포넌트를 선언적으로 작성할 수 있게 해줍니다. 하지만 React Native에서는 JSX pragma를 활용하여 JSX 문법을 더욱 쉽게 사용할 수 있습니다.

JSX Pragma란?

JSX Pragma는 JSX 코드가 JavaScript 함수 호출로 변환되는 방식을 지정하는 데 사용됩니다. React Native에서는 기본적으로 React.createElement 함수를 사용하여 JSX를 변환합니다. 그러나 JSX Pragma를 설정하면 더 간단한 문법을 사용할 수 있습니다.

Babel을 사용한 JSX Pragma 설정

React Native 개발환경에서 Babel을 사용하여 JSX Pragma를 설정하는 방법은 다음과 같습니다.

먼저 .babelrc 파일을 프로젝트 루트 디렉토리에 생성합니다.
.babelrc 파일에 다음 코드를 추가합니다.

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "React.createElement",
      "pragmaFrag": "React.Fragment"
    }]
  ]
}

이제 JSX Pragma가 설정되었습니다. 이제부터 JSX 코드를 보다 간결하게 작성할 수 있습니다.

JSX Pragma를 활용한 예제

아래는 JSX Pragma를 활용하여 작성된 간단한 React Native 컴포넌트의 예제입니다.

/** @jsx jsx */
import { jsx, css } from '@emotion/react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View
      css={css`
        flex: 1;
        justify-content: center;
        align-items: center;
      `}
    >
      <Text
        css={css`
          font-size: 24px;
          color: #333;
        `}
      >
        Hello, World!
      </Text>
    </View>
  );
}

위의 예제에서는 JSX Pragma 설정을 위해 @jsx jsx 주석을 추가하였습니다. 이를 통해 JSX 문법을 사용할 수 있게 됩니다. jsx 함수와 css 함수는 react-native 패키지가 제공하는 함수로, 스타일을 지정하는 데 사용됩니다. View와 Text 컴포넌트는 React Native의 기본 컴포넌트이며, 스타일을 동적으로 지정하기 위해 css 속성을 사용했습니다.

결론

JSX Pragma를 활용하여 React Native 애플리케이션을 개발하면 보다 간결하고 가독성 있는 코드를 작성할 수 있습니다. Babel을 사용하여 JSX Pragma를 설정하는 방법을 습득하고, React Native에서의 모바일 애플리케이션 개발을 더욱 효율적으로 수행해보세요.

#ReactNative #JSXPragma