[javascript] 리액트에서 CSS 스타일링 방법

22 Dec 2023

javascript

리액트 애플리케이션을 개발할 때, CSS 스타일을 적용하는 방법은 여러 가지가 있습니다. 이 블로그 포스트에서는 리액트에서 CSS를 스타일링하는 다양한 방법을 알아보겠습니다.

1. 일반적인 CSS 파일 사용

가장 기본적인 방법은 일반적인 CSS 파일을 사용하는 것입니다. CSS 파일을 작성하고, 해당 파일을 컴포넌트에 import하여 사용할 수 있습니다.

예시:

// styles.css
.button {
  background-color: #007bff;
  color: #fff;
}

// Button.js
import React from 'react';
import './styles.css';

const Button = () => {
  return <button className="button">Click me</button>;
}

export default Button;

2. CSS 모듈 사용

CSS 모듈은 각 클래스 이름에 고유한 해시값을 부여하여 스코프를 만들어주는 방식으로, 클래스 이름 충돌을 방지할 수 있습니다. 파일 이름.module.css로 저장하고, 해당 모듈을 컴포넌트에서 import하여 사용합니다.

예시:

// Button.module.css
.button {
  background-color: #007bff;
  color: #fff;
}

// Button.js
import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.button}>Click me</button>;
}

export default Button;

3. CSS-in-JS 라이브러리 사용

CSS-in-JS 라이브러리 중에는 styled-components, emotion 등이 있습니다. 이러한 라이브러리를 사용하면 JavaScript 안에 CSS를 작성하여 스타일을 적용할 수 있습니다.

예시 (styled-components):

// Button.js
import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #007bff;
  color: #fff;
`;

const Button = () => {
  return <StyledButton>Click me</StyledButton>;
}

export default Button;

결론

리액트에서는 다양한 방법을 통해 CSS 스타일을 적용할 수 있습니다. 각 방법마다 장단점이 있으니, 프로젝트의 요구사항에 맞게 적합한 방법을 선택하여 사용하면 됩니다.

참고 자료: