CSS 스타일링 및 UI 라이브러리 정리(feat. React)

CSS 스타일링 및 UI 라이브러리 정리

CSS 스타일링은 웹 개발에서 중요한 부분으로, 각기 다른 방식으로 CSS를 작성하고 적용하는 다양한 접근법이 존재합니다. 이번 글에서는 CSS 스타일링 기법 중 CSS-in-CSS, CSS-in-JS, 그리고 Utility-First-CSS를 설명하고, 각 기법의 장단점과 사용 예제를 함께 소개하겠습니다.

CSS 스타일링 및 UI 라이브러리

---

1. CSS-in-CSS

CSS-in-CSS는 가장 전통적인 방식으로, CSS 파일을 별도로 작성하여 HTML이나 React 컴포넌트에 적용하는 방식입니다. 이 방법은 코드의 재사용성을 높일 수 있으며, 스타일을 별도의 파일로 관리함으로써 유지보수가 용이하다는 장점이 있습니다.

CSS-in-CSS in React

React 컴포넌트에서 CSS-in-CSS 방식을 사용하면, 일반적인 CSS 파일을 생성하고 이를 컴포넌트에서 import하여 사용할 수 있습니다.

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

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

export default Button;

/* Button.css */
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

위 예시에서는 Button.css 파일에서 작성한 스타일을 React 컴포넌트에 import하여 적용하고 있습니다.

CSS-in-CSS with SASS

SASS는 CSS의 확장으로, 더 효율적이고 강력한 CSS 스타일링을 지원하는 전처리기입니다. 변수를 사용하여 일관된 스타일을 유지하거나, 중첩된 스타일을 통해 CSS 구조를 간결하게 만들 수 있습니다.

/* Button.scss */
$primary-color: blue;

.btn {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

 

CSS-in-CSS 방식에서는 CSS Module을 통해 컴포넌트별로 고유한 클래스를 적용할 수 있습니다. 이를 통해 전역 CSS 네이밍 충돌을 방지합니다.

// Button.js (with CSS Module)
import React from 'react';
import styles from './Button.module.css';

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

export default Button;

/* Button.module.css */
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

---

2. CSS-in-JS

CSS-in-JS는 JS 코드 안에서 CSS를 직접 작성하는 방식입니다. 이를 통해 컴포넌트의 상태에 따라 동적으로 스타일을 변경할 수 있습니다. 대표적인 라이브러리로는 Styled-Components와 Emotion이 있습니다.

Styled-Components 사용 예제

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <Button>Click me</Button>;
}

export default App;

 

위 예시에서는 styled.button을 사용하여 Button 컴포넌트를 동적으로 스타일링합니다. CSS-in-JS 방식은 자바스크립트 내에서 변수를 쉽게 사용할 수 있으며, 조건에 따라 스타일을 동적으로 적용할 수 있다는 장점이 있습니다.

Emotion 사용 예제

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

const buttonStyle = css`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <button css={buttonStyle}>Click me</button>;
}

export default App;

 

Emotion은 css 함수를 사용하여 스타일을 정의하고, 이를 컴포넌트에 적용하는 방식입니다.

---

3. Utility-First-CSS

Utility-First-CSS는 미리 정의된 클래스들을 사용하여 빠르게 스타일을 적용하는 방식입니다. 대표적인 예로는 Tailwind CSS가 있으며, 다양한 Utility 클래스를 제공해 스타일링을 간편하게 할 수 있습니다.

Tailwind CSS 사용 예제

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
  Click me
</button>

 

위 예시에서는 Tailwind의 유틸리티 클래스를 사용해 스타일을 적용하고 있습니다. Tailwind CSS는 직관적인 클래스를 통해 빠르게 스타일을 작성할 수 있으며, 유지보수가 용이하다는 장점이 있습니다.

장점:

• HTML에서 직접 스타일을 적용할 수 있어 빠른 개발이 가능합니다.
• 클래스 기반으로 코드를 짧게 유지할 수 있습니다.

단점:

• CSS를 직접 작성하는 것보다 HTML에 클래스가 많이 추가될 수 있습니다.
• 팀 프로젝트에서는 규칙적인 사용이 필요합니다.

---

4. 결론

이번 글에서는 CSS-in-CSS, CSS-in-JS, Utility-First-CSS 세 가지 CSS 스타일링 기법에 대해 설명하였습니다. 각 방법은 장단점이 있으므로, 프로젝트의 특성과 팀의 요구에 맞춰 적절한 방법을 선택하는 것이 중요합니다.

CSS-in-CSS는 전통적인 방식으로, 복잡한 프로젝트에서도 안정적으로 사용할 수 있습니다. CSS-in-JS는 동적 스타일링이 필요한 상황에서 유용하며, Utility-First-CSS는 빠르고 간결하게 스타일을 적용해야 하는 프로젝트에서 효율적으로 사용할 수 있습니다.