JSX pragma를 이용한 컴포넌트 복합화(Composition) 방법

05 Oct 2023

JSXpragma

JSX는 React의 핵심 문법 중 하나로, 컴포넌트를 작성하고 구성할 수 있는 강력한 기능을 제공합니다. JSX를 통해 간단하게 컴포넌트를 조합하여 더 큰 컴포넌트를 만들 수 있습니다. 이를 컴포넌트 복합화(Composition)라고 합니다.

JSX Pragma란?

JSX Pragma는 JSX를 사용하여 컴포넌트를 작성할 때 사용되는 특별한 지시문입니다. 일반적으로 React.createElement 함수를 호출하여 JSX를 변환하는데, JSX Pragma를 사용하면 이 변환 과정을 간소화할 수 있습니다.

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

...

위의 코드에서 @jsx 주석을 통해 JSX Pragma를 지정하고, jsx 함수를 import해서 사용할 수 있습니다.

컴포넌트 복합화 방법

컴포넌트 복합화를 위해 JSX Pragma를 사용하는 예시를 살펴보겠습니다.

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

function Button({ children, onClick }) {
  return (
    <button
      css={{
        border: '1px solid #ccc',
        padding: '8px 16px',
        borderRadius: '4px',
        background: 'white',
        cursor: 'pointer',
      }}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

function Alert({ children }) {
  return (
    <div
      css={{
        border: '2px solid red',
        padding: '16px',
        borderRadius: '8px',
        background: 'lightyellow',
      }}
    >
      {children}
    </div>
  );
}

function App() {
  return (
    <Alert>
      <h3>Alert Message</h3>
      <p>This is an example of composition in React using JSX pragma.</p>
      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
    </Alert>
  );
}

위 코드에서는 Button 컴포넌트와 Alert 컴포넌트를 정의하고, App 컴포넌트에서 이를 조합하여 사용합니다. Alert 컴포넌트는 상자 형식의 알림을 표시하고, Button 컴포넌트는 클릭 가능한 버튼을 나타냅니다.

이렇게 JSX Pragma를 이용하여 컴포넌트를 복합화하면 재사용성이 높은 컴포넌트를 만들 수 있습니다. 컴포넌트를 작게 나누고, 조합하여 더 큰 컴포넌트를 만들어나가는 방식은 React의 가장 강력한 기능 중 하나입니다.

결론

JSX Pragma를 이용하여 컴포넌트 복합화하는 방법에 대해 알아보았습니다. 이를 통해 재사용성이 높은 컴포넌트를 만들고, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. React에서 컴포넌트 복합화를 잘 이용하여 효율적이고 생산적인 개발을 해보세요.

#React #JSX #컴포넌트 #복합화