목차

• 인라인 스타일링
• CSS 클래스 사용
• CSS-in-JS 라이브러리 활용

인라인 스타일링

JSX에서 컴포넌트를 스타일링하는 가장 간단한 방법은 인라인 스타일링입니다. JSX에서 style 속성을 사용하여 스타일을 정의할 수 있습니다. 이 방법은 간단하고 빠르지만, 유지보수가 어려울 수 있으며 코드가 지저분해질 수 있습니다.

const MyComponent = () => {
  return <div style={{ color: 'blue', fontSize: '16px' }}>Hello, world!</div>;
};

CSS 클래스 사용

CSS 클래스를 사용하여 JSX에서 컴포넌트를 스타일링할 수도 있습니다. 이 경우 CSS 파일을 import하여 클래스를 적용할 수 있습니다.

import './MyComponent.css';

const MyComponent = () => {
  return <div className="my-component">Hello, world!</div>;
};

CSS-in-JS 라이브러리 활용

또 다른 방법으로는 CSS-in-JS 라이브러리를 활용하는 것입니다. 이 방식은 스타일을 JavaScript 파일 내에서 정의하고 적용하는 방식으로, 코드 유지보수와 재사용성을 향상시킬 수 있습니다. Emotion, Styled Components, Glamorous 등의 라이브러리를 활용할 수 있습니다.

import styled from '@emotion/styled';

const StyledComponent = styled.div`
  color: blue;
  font-size: 16px;
`;

const MyComponent = () => {
  return <StyledComponent>Hello, world!</StyledComponent>;
};

JSX에서 컴포넌트를 스타일링하는 방법은 다양하며, 프로젝트의 요구 사항과 개발자의 선호도에 따라 적절한 방법을 선택해야 합니다.