React x Styles <우린 어떤 방식의 스타일을 써야하는가?>

웹 개발(프론트엔트 개발)을 할 때 스타일링 방식은 프로젝트와 팀의 스타일에 따라 다릅니다. CSS-in-JS, CSS-in-CSS, 그리고 Utility-First인 Tailwind CSS는 각기 다른 철학과 장점을 가집니다. 오늘은 대표적인 Emotion (CSS-in-JS)과 CSS-in-CSS, 그리고 Tailwind CSS를 비교하며, 언제 어떤 방식을 선택해야 할지 설명해 보겠습니다.

 

 

귀여운 ai 사진 ㅋ

1. CSS-in-JS (Emotion)

 

개요

 

CSS-in-JS는 자바스크립트 파일 안에 CSS 스타일을 작성할 수 있게 해 주는 방식입니다.

그 중 제가 선호하는 방식인 Emotion은 styled 컴포넌트나 css 함수를 통해 컴포넌트 기반의 스타일링을 제공합니다.

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

const buttonStyle = css`
  background-color: #007bff;
  color: white;
  padding: 1rem;
  border-radius: 5px;

  &:hover {
    background-color: #0056b3;
  }
`;

const Button = () => <button css={buttonStyle}>Click Me</button>;

 

 

장점

1. 스타일이 컴포넌트 단위로 캡슐화되어 유지보수가 용이합니다.

2. JavaScript 변수, 함수, Props를 활용하여 동적 스타일링이 가능합니다.

3. 글로벌 스타일과 일회성 스타일을 동시에 적용할 수 있습니다.

4. ThemeProvider를 통해 전역 테마를 관리할 수 있습니다.

 

단점

1. 번들 크기가 커질 수 있음: 많은 양의 동적 스타일을 작성할 경우 번들 파일 크기가 커질 수 있습니다.

2. 브라우저에 스타일 시트가 주입되므로 렌더링 성능에 영향을 줄 수 있습니다.

3. 런타임 스타일링 방식은 속도가 느려질 가능성이 있습니다. 하지만 @emotion/styled과 babel-plugin을 사용하면 성능 최적화가 가능합니다.

 

적합한 상황

• 스타일을 Props에 따라 동적으로 변경해야 하는 경우

• 프로젝트가 컴포넌트 중심 설계로 이루어진 경우

• 팀에서 React와 같은 컴포넌트 기반 라이브러리를 주로 사용하는 경우

 

 

 

2. CSS-in-CSS (전통적인 스타일링)

 

개요

전통적인 방식으로 *.css 파일에 스타일을 정의하고 <link> 태그나 import로 불러옵니다.

처음 css를 접할때, 가장 많이 접하는 방식입니다.

 

/* styles.css */
.button {
  background-color: #007bff;
  color: white;
  padding: 1rem;
  border-radius: 5px;
}

.button:hover {
  background-color: #0056b3;
}



// App.js
import './styles.css';

const Button = () => <button className="button">Click Me</button>;

 

 

장점

1. HTML, CSS, JavaScript 분리로 인해 코드를 쉽게 읽을 수 있습니다.

2. 성능 최적화에 강하며, CSS는 브라우저에 의해 캐싱됩니다.

3. 간단한 스타일을 적용할 때 코드가 매우 직관적입니다.

 

단점

1. 클래스 네이밍 충돌 문제가 발생할 수 있습니다. (BEM과 같은 네이밍 규칙 필요)

2. 동적 스타일링이 어려워 Props에 따라 스타일을 조정할 때 코드가 복잡해질 수 있습니다.

3. 컴포넌트 기반 라이브러리에서 사용 시 스타일을 다른 파일에서 관리해야 합니다.

 

적합한 상황

• 간단한 프로젝트나 동적 스타일이 필요하지 않은 프로젝트

• CSS를 브라우저 캐싱을 통해 성능 최적화를 극대화하려는 경우

• JavaScript 로직과 스타일을 분리해 협업이 더 편리한 경우

 

 

3. Tailwind CSS (Utility-First CSS Framework)

 

개요

 

Tailwind는 유틸리티 클래스를 사용하여 HTML 요소에 직접 스타일링을 합니다. 별도의 CSS 작성 없이 미리 정의된 클래스를 조합하여 스타일을 구현할 수 있습니다.

 

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

 

 

장점

1. 빠른 개발 속도: 미리 정의된 클래스를 조합하기만 하면 되므로 스타일 작성이 매우 빠릅니다.

2. CSS 파일이 줄어듦: 대부분의 스타일링이 HTML에 포함되므로 별도 CSS 작성이 필요하지 않습니다.

3. 유지보수성: 일관된 디자인 시스템을 적용할 수 있습니다.

4. 반응형 지원: Tailwind는 sm:, md:, lg: 등 반응형 클래스가 내장되어 있어 간단하게 반응형 디자인을 적용할 수 있습니다.

 

단점

1. HTML 파일이 복잡해짐: 유틸리티 클래스가 많아지면 HTML 코드가 길어질 수 있습니다.

2. 커스터마이징을 위해 Tailwind 설정 파일(tailwind.config.js)을 다루어야 합니다.

3. Tailwind를 배우기 위한 학습 곡선이 존재합니다.

 

적합한 상황

• 프로토타이핑이 빠르게 이루어져야 하는 프로젝트

• 디자인 시스템을 일관되게 유지해야 하는 경우

• 반응형 레이아웃을 간단하게 구현해야 하는 프로젝트

 

 

 

 

 

결론

• CSS-in-JS (Emotion): 컴포넌트 기반 설계와 동적 스타일링이 필요한 경우 적합합니다.

• CSS-in-CSS: 간단한 프로젝트나 스타일과 로직을 분리하고자 할 때 효과적입니다.

• Tailwind CSS: 빠른 프로토타이핑과 반응형 디자인이 중요한 프로젝트에서 유용합니다.

 

프로젝트의 복잡도, 팀의 스타일, 그리고 유지보수성을 고려하여 적절한 스타일링 방식을 선택하는 것이 중요합니다. Emotion과 Tailwind CSS를 함께 사용하거나, 필요에 따라 CSS-in-CSS로 보완하는 혼합 방식도 가능합니다.