JSX pragma를 활용한 웹 컴포넌트 라이브러리 개발 방법

05 Oct 2023

JSXpragma

웹 개발에서 컴포넌트 기반 아키텍처는 많은 이점을 제공합니다. 이를 통해 코드 재사용성과 유지보수성을 향상시킬 수 있습니다. 하지만 일반적인 웹 개발에서는 JavaScript의 Class나 함수를 이용하여 컴포넌트를 만들게 됩니다. 이에 비해, JSX pragma를 활용하여 웹 컴포넌트를 개발함으로써 더욱 쉽게 컴포넌트를 작성하고 재사용할 수 있습니다.

JSX Pragma란?

JSX Pragma는 JSX 코드를 해석하고 실행할 때 사용되는 함수 또는 설정입니다. React에서는 가장 많이 사용되는 JSX Pragma입니다. 예를 들어, 다음과 같이 React.createElement 함수를 JSX Pragma로 사용합니다.

/** @jsx jsx */
import { jsx } from '@emotion/react';
import React from 'react';

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

이렇게 JSX Pragma를 설정하여 JSX 코드를 해석하고 실행될 때, 해당 함수가 호출되어 가상 DOM 요소를 생성합니다.

웹 컴포넌트 라이브러리 개발 방법

프로젝트 초기화 및 설정

먼저, 웹 컴포넌트 라이브러리 개발을 위한 프로젝트를 초기화합니다. 다음 명령을 실행하여 필요한 패키지들을 설치합니다.

$ npm init
$ npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

그리고 .babelrc 파일을 생성하고 다음과 같이 설정합니다.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

마지막으로, 웹팩 설정 파일 webpack.config.js를 생성하고 다음과 같이 설정합니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

컴포넌트 개발

이제 웹 컴포넌트를 개발합니다. src 폴더 안에 Button 컴포넌트를 작성하는 예제를 살펴보겠습니다.

   
/** @jsx jsx */
import { jsx } from '@emotion/react';
import React from 'react';

const Button = ({ text }) => {
  return (
    <button
      css={{
        padding: '10px',
        backgroundColor: 'blue',
        color: 'white',
      }}
    >
      {text}
    </button>
  );
};

export default Button;
   

위 예제에서는 JSX pragma로 jsx를 사용하였으며, @emotion/react 패키지를 이용하여 CSS-in-JS를 구현하였습니다.

웹 애플리케이션에서 사용

개발한 웹 컴포넌트를 웹 애플리케이션에서 사용하기 위해서는 public/index.html 파일에 다음과 같이 컴포넌트를 마크업합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>My Web App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
  </body>
</html>

그리고 src/index.js 파일에서 다음과 같이 컴포넌트를 렌더링합니다.

/** @jsx jsx */
import { jsx } from '@emotion/react';
import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Button';

ReactDOM.render(
  <Button text="Click me!" />,
  document.getElementById('root')
);

이제 웹 애플리케이션을 빌드하고 실행하면, Button 컴포넌트가 렌더링되어 화면에 나타납니다.

마무리

JSX Pragma를 활용하여 웹 컴포넌트 라이브러리를 개발하는 방법에 대해 알아보았습니다. 이를 통해 웹 컴포넌트 개발을 더욱 쉽고 간편하게 할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 이제 여러분도 JSX Pragma를 활용하여 웹 컴포넌트 라이브러리를 개발해보세요!

JSX Pragma란?

웹 컴포넌트 라이브러리 개발 방법

마무리

#웹개발 #웹컴포넌트 #JSX #개발방법