프론트엔드 노트

프론트엔드 개발에서 스타일을 적용하는 방법은 크게 두 가지로 나뉩니다. 전통적인 스타일 시트(CSS)와 최근에 인기를 끌고 있는 CSS-in-JS 방식입니다. 이 두 방식은 각기 장단점이 있으며, 어떤 상황에서 어떤 방식을 선택해야 할지 고민하는 개발자들이 많습니다. 이번 글에서는 CSS-in-JS와 전통 스타일 시트의 차이점, 장단점, 그리고 실제 사용 사례를 통해 어떤 상황에서 어떤 방식을 선택해야 할지 알아보겠습니다.

전통 스타일 시트 (CSS)

전통적인 CSS 방식은 HTML 파일과 별도로 .css 파일을 작성하여 스타일을 정의하는 방법입니다. 이 방식의 가장 큰 장점은 다음과 같습니다.

분리된 관심사: HTML, CSS, JS 파일이 분리되어 있어 코드의 가독성이 높아집니다.
재사용성: CSS 클래스와 ID를 통해 여러 요소에 동일한 스타일을 쉽게 적용할 수 있습니다.
전통적인 접근: 웹 개발 초창기부터 사용되어 왔기 때문에 많은 자료와 커뮤니티 지원이 존재합니다.

하지만 전통적인 CSS 방식은 단점도 있습니다.

전역 네임스페이스: 스타일이 전역적으로 적용되기 때문에 클래스 이름 충돌 등의 문제가 발생할 수 있습니다.
미디어 쿼리 관리: 반응형 디자인을 구현할 때 미디어 쿼리를 잘 관리해야 합니다.
구조와 스타일의 결합: HTML과 CSS 파일이 분리되어 있지만, 여전히 스타일과 구조가 밀접하게 연결되어 있습니다.

CSS-in-JS

CSS-in-JS는 JavaScript 코드 안에서 스타일을 정의하는 방식으로, React, Vue, Angular와 같은 현대적인 프론트엔드 프레임워크와 잘 어울립니다. CSS-in-JS의 장점은 다음과 같습니다.

컴포넌트 기반 스타일: 각 컴포넌트에서 스타일을 정의할 수 있어, 스타일이 컴포넌트와 함께 캡슐화됩니다. 이를 통해 네임스페이스 문제를 피할 수 있습니다.
동적 스타일링: JavaScript를 통해 동적으로 스타일을 변경할 수 있어, 사용자 상호작용에 따라 스타일을 쉽게 조정할 수 있습니다.
서버 사이드 렌더링: SSR을 지원하는 라이브러리를 사용하면 초기 로딩 시 스타일이 미리 로드되어 사용자 경험을 개선할 수 있습니다.

하지만 CSS-in-JS 방식도 단점이 있습니다.

러닝 커브: 새로운 개념이기 때문에 기존 CSS에 익숙한 개발자에게는 학습이 필요합니다.
퍼포먼스 이슈: 런타임에 스타일을 계산해야 하므로, 성능이 저하될 수 있습니다. 특히 대규모 애플리케이션에서는 더욱 주의해야 합니다.
의존성: CSS-in-JS 라이브러리에 의존하게 되어, 라이브러리의 유지보수에 영향을 받을 수 있습니다.

어떤 상황에서 무엇을 선택할까?

각 방식의 장단점을 살펴보았으니, 이제 어떤 상황에서 무엇을 선택해야 할지 고민해 볼 차례입니다.

소규모 프로젝트: 프로젝트가 작고, 팀원들이 CSS에 익숙하다면 전통적인 CSS 방식을 사용하는 것이 좋습니다. 유지보수와 코드 관리가 간편하기 때문입니다.
대규모 프로젝트: 팀이 크고, 복잡한 UI 컴포넌트를 사용하는 경우 CSS-in-JS 방식을 고려해 볼 수 있습니다. 컴포넌트 기반의 스타일링은 협업 시 효과적입니다.
동적 스타일링 필요: 사용자 상호작용에 따라 스타일을 변경해야 하는 경우, CSS-in-JS가 적합합니다. JavaScript와의 통합이 용이하기 때문입니다.
반응형 디자인: CSS 미디어 쿼리를 포함하여 반응형 디자인을 구현해야 하는 경우, 전통적인 CSS 방식도 고려할 수 있습니다. 많은 프로젝트에서 이미 적용되어 있는 방식이기 때문에, 팀원들이 쉽게 이해할 수 있습니다.

코드 예제

이제 간단한 코드 예제를 통해 두 가지 방식을 비교해 보겠습니다.

전통 CSS 사용 예제:

/ styles.css /
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>전통 CSS 예제</title>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS-in-JS 사용 예제 (Styled-components 사용):

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

const Box = styled.div
    width: 100px;
    height: 100px;
    background-color: blue;
;

function App() {
    return <Box />;
}

export default App;

마무리

CSS-in-JS와 전통 스타일 시트는 각각의 장단점이 있으며, 상황에 따라 적합한 선택이 필요합니다. 소규모 프로젝트에는 전통적인 CSS 방식이, 복잡한 UI와 동적 스타일링을 요구하는 대규모 프로젝트에는 CSS-in-JS 방식이 유리할 수 있습니다. 각 팀과 프로젝트의 요구사항에 맞춰 적절한 방식을 선택하여 최상의 결과를 만들어 나가시기 바랍니다.

CSS-in-JS vs 전통 스타일 시트, 어떤 상황에 무엇을 선택할까?

전통 스타일 시트 (CSS)

CSS-in-JS

어떤 상황에서 무엇을 선택할까?

코드 예제

마무리