JSX(JavaScript XML)는 JavaScript를 확장하여 UI 컴포넌트를 작성할 수 있는 강력한 도구입니다. JSX에서는 CSS 스타일을 직접 작성하는 대신, CSS-in-JS를 사용하여 스타일을 정의하고 적용할 수 있습니다.

CSS-in-JS란?

CSS-in-JS는 JavaScript 코드 내에서 스타일을 작성하고 적용하는 방법을 의미합니다. 이는 컴포넌트 기반 개발에서 컴포넌트와 연결된 스타일을 더 쉽게 관리할 수 있도록 도와줍니다. CSS-in-JS를 사용하면 스타일을 동적으로 조작하고 컴포넌트 간의 스타일 충돌을 방지할 수 있습니다.

Emotion CSS-in-JS 라이브러리

Emotion은 React와 함께 사용하기 위해 만들어진 인기 있는 CSS-in-JS 라이브러리입니다. 이 라이브러리를 사용하면 JSX pragma를 사용하여 스타일을 작성하고 컴포넌트에 적용할 수 있습니다.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function MyComponent () {
  const styles = css`
    color: #333;
    font-size: 16px;
    margin-top: 10px;
  `;
  
  return (
    <div css={styles}>
      Hello, World!
    </div>
  );
}

위의 코드에서 @jsxImportSource @emotion/react pragma를 사용하여 Emotion을 JSX에 적용합니다. 그리고 css 함수를 사용하여 스타일을 작성하고 변수로 저장합니다. 마지막으로 css 함수가 반환한 스타일 객체를 JSX의 css 속성으로 전달하여 스타일을 적용합니다.

Emotion은 다양한 스타일링 방법과 유용한 기능을 제공합니다. 예를 들어, styled 함수를 사용하여 JSX 태그를 직접 스타일링할 수 있습니다.

import { styled } from '@emotion/react';

const Title = styled.h1`
  color: #333;
  font-size: 24px;
`;

function App () {
  return (
    <div>
      <Title>Hello, Emotion!</Title>
    </div>
  );
}

위의 코드에서는 styled 함수를 사용하여 h1 태그를 스타일링한 Title 컴포넌트를 정의하였습니다. 이렇게 작성한 Title 컴포넌트는 JSX에서 일반적인 태그처럼 사용할 수 있고, 해당 태그에 정의한 스타일이 적용됩니다.

결론

JSX pragma와 함께 CSS-in-JS를 사용하면 React 컴포넌트의 스타일을 더욱 쉽게 관리할 수 있습니다. Emotion과 같은 CSS-in-JS 라이브러리를 사용하면 스타일링을 더욱 유연하게 다룰 수 있고, 컴포넌트 간의 스타일 충돌을 예방할 수 있습니다. CSS-in-JS를 통해 더욱 생산적이고 유지보수가 용이한 코드를 작성해보세요.

#React #CSSinJS