[react] JSX에서 CSS 스타일링

26 Dec 2023

react

React에서 JSX를 사용하면 HTML과 JavaScript를 쉽게 조합할 수 있으며, CSS 스타일링도 포함할 수 있습니다. 이 글에서는 React JSX에서 CSS를 적용하는 방법을 살펴보겠습니다.

Inline 스타일링

React JSX에서는 inline 스타일링을 통해 해당 요소에 직접 CSS를 적용할 수 있습니다. 이것은 객체 형태로 스타일을 지정하는 방식으로, JavaScript 객체를 사용하여 스타일을 정의합니다.

import React from 'react';

const MyComponent = () => {
  const divStyle = {
    color: 'blue',
    backgroundColor: 'lightgrey',
    padding: '10px'
  };

  return <div style={divStyle}>Hello World!</div>;
}

export default MyComponent;

CSS 파일로 관리

또 다른 방법은 CSS 파일로 스타일을 관리하는 것입니다. React에는 CSS 파일을 import하여 JSX 요소에 클래스를 적용할 수 있습니다.

import React from 'react';
import './MyComponent.css';

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

export default MyComponent;

이때 MyComponent.css 파일은 다음과 같이 정의될 수 있습니다.

.my-component {
  color: blue;
  background-color: lightgrey;
  padding: 10px;
}

CSS Modules

또 다른 방법으로는 CSS Modules을 사용하는 것이 있습니다. CSS Modules은 클래스 이름이 로컬적으로 유효하도록 하여 클래스 이름 충돌을 방지합니다.

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return <div className={styles.myComponent}>Hello World!</div>;
}

export default MyComponent;

위 예제에서 MyComponent.module.css 파일은 다음과 같이 정의됩니다.

.myComponent {
  color: blue;
  background-color: lightgrey;
  padding: 10px;
}

이렇게 함으로써 React JSX에서 CSS를 적용하는 방법을 간략하게 소개하였습니다. 다양한 방법 중 원하는 방식을 선택하여 React 애플리케이션에 CSS를 적용할 수 있습니다.

Inline 스타일링

CSS 파일로 관리

CSS Modules

참고 자료