CSS 고급 도구

CSS CSS-in-JS 개념

CSS CSS-in-JS 개념 — 고급

CSS-in-JS 개념

1. 도입 (왜 배워야 하는가)

CSS-in-JS는 JavaScript 코드 내에서 직접 CSS 스타일을 정의하고 적용하는 방식을 의미합니다. 이 방식은 특히 React와 같은 컴포넌트 기반 라이브러리에서 인기를 얻고 있습니다. 왜냐하면 컴포넌트의 재사용성과 유지보수성을 크게 향상시킬 수 있기 때문입니다.

실무에서 CSS-in-JS를 사용하지 않으면 다음과 같은 문제가 발생할 수 있습니다:

스타일의 전역화: CSS 파일이 커지면서 어떤 스타일이 어디에 적용되는지 파악하기 어려워 집니다. 이로 인해 중복된 스타일이 발생하거나, 의도치 않게 다른 컴포넌트의 스타일이 변경될 수 있습니다.
동적 스타일링의 어려움: 사용자 상호작용에 따라 스타일을 변경하는 것이 어려워집니다. CSS-in-JS 방식은 JavaScript의 로직과 스타일을 함께 묶어 관리할 수 있어 이러한 문제를 해결할 수 있습니다.

2. 핵심 개념 설명

CSS-in-JS는 기본적으로 JavaScript 코드 내에서 CSS를 정의하는 패턴입니다. 이를 통해 다음과 같은 이점을 얻을 수 있습니다.

Scoped Styles: 컴포넌트에 대한 스타일이 해당 컴포넌트 내에서만 적용되어, 전역적인 스타일 충돌을 방지합니다.
Dynamic Styling: props나 state에 따라 스타일을 동적으로 변경할 수 있습니다.

용어	설명
Scoped Styles	특정 컴포넌트에만 적용되는 스타일
Dynamic Styling	상태나 프로퍼티에 따라 스타일을 변경하는 방식

3. 기본 코드 예제

아래는 CSS-in-JS 라이브러리인 styled-components를 사용하여 버튼을 만드는 간단한 예제입니다.

import styled from 'styled-components';

// styled-components를 이용하여 Button 컴포넌트 생성
const Button = styled.button
  background-color: ${({ primary }) => (primary ? 'blue' : 'gray')}; // primary props에 따라 색상 결정
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
;

// 컴포넌트를 사용하는 예제
const App = () => (
  <div>
    <Button primary>Primary Button</Button> {/ Primary 버튼 /}
    <Button>Default Button</Button> {/ 기본 버튼 /}
  </div>
);

// 실행 결과: 두 개의 버튼이 보인다. 첫 번째는 파란색, 두 번째는 회색 배경.

styled.button은 버튼 요소를 기반으로 새로운 스타일이 적용된 컴포넌트를 생성합니다.
background-color 속성은 primary props에 따라 동적으로 변경됩니다.
App 컴포넌트에서 두 개의 버튼을 렌더링하여 결과를 확인할 수 있습니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니 아이콘

장바구니 아이콘이 비어있을 때와 가득 찼을 때의 스타일을 다르게 할 수 있습니다.

const CartIcon = styled.div
  background-color: ${({ filled }) => (filled ? 'red' : 'lightgray')};
  width: 40px;
  height: 40px;
  border-radius: 50%;
;

// 사용 예
<CartIcon filled={true} /> {/ 가득 찬 장바구니 아이콘 /}
<CartIcon filled={false} /> {/ 비어있는 장바구니 아이콘 /}

장바구니가 가득 차면 빨간색, 비어있으면 연한 회색으로 표시됩니다.

예제 2: 사용자 프로필 카드

프로필 카드에서 사용자의 상태에 따라 스타일을 변경할 수 있습니다.

const ProfileCard = styled.div
  border: 1px solid ${({ online }) => (online ? 'green' : 'red')};
  padding: 20px;
  border-radius: 10px;
;

// 사용 예
<ProfileCard online={true}>Online User</ProfileCard> {/ 온라인 사용자 /}
<ProfileCard online={false}>Offline User</ProfileCard> {/ 오프라인 사용자 /}

사용자 상태에 따라 테두리 색상이 달라집니다.

5. 흔한 실수와 주의사항

실수 1: Props를 잘못 전달하기

// 잘못된 코드
<Button isPrimary>Click Me</Button> // 'isPrimary'는 정의되지 않음

// 올바른 코드
<Button primary>Click Me</Button> // 'primary'로 props 전달

CSS-in-JS에서 사용하는 props의 이름을 정확히 확인해야 합니다.

실수 2: 스타일을 너무 복잡하게 만들기

// 잘못된 코드
const ComplexButton = styled.button
  background-color: ${({ primary }) => primary ? 'blue' : 'gray'};
  transition: all 0.3s ease; // 너무 많은 스타일이 겹침
;

// 올바른 코드
const SimpleButton = styled.button
  background-color: ${({ primary }) => primary ? 'blue' : 'gray'};
  transition: background-color 0.3s ease; // 필요한 스타일만 적용
;

스타일을 단순하게 유지하여 가독성을 높이는 것이 중요합니다.

6. 정리

CSS-in-JS는 컴포넌트 기반 라이브러리에서 스타일을 효율적으로 관리할 수 있는 방법입니다.
Scoped Styles와 Dynamic Styling을 통해 사용자 경험을 향상시킬 수 있습니다.
다음에 학습하면 좋은 주제는 CSS-in-JS 라이브러리의 비교(예: Emotion, styled-components)입니다.

학습