[Next.js14 강의] 10강 - 컴포넌트 스타일링 (CSS 모듈과 styled-components)

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Next.js에서 컴포넌트의 스타일링 방법을 학습합니다. 특히, CSS 모듈과 styled-components를 사용하여 컴포넌트별로 스타일을 관리하는 방법을 중점적으로 다룹니다. 이 강의를 통해 스타일링의 다양한 접근법과 그에 따른 장단점을 이해할 수 있습니다.

 

 

1. Next.js에서 스타일링 방법 소개

 

전통적인 CSS 사용

· 가장 기본적인 방식으로, 글로벌 CSS 파일을 작성하여 페이지에 적용합니다. 하지만 이 방법은 클래스 이름 충돌 및 유지보수 문제를 일으킬 수 있습니다.

 

CSS 모듈

· 컴포넌트별로 고유한 스타일을 적용하기 위해 사용되며, 클래스 이름 충돌을 방지할 수 있습니다. 각 컴포넌트가 독립적인 스타일을 가지게 되어 유지보수가 용이해집니다.

728x90

CSS-in-JS

· JavaScript 코드 안에 CSS를 작성하는 방법입니다. styled-components와 같은 라이브러리를 사용하여 컴포넌트 기반으로 스타일을 적용할 수 있습니다.

 

 

2. CSS 모듈 (CSS Modules)

 

CSS 모듈이란?

· CSS 모듈은 각 컴포넌트가 고유한 CSS 파일을 가지도록 하여, 클래스 이름이 겹치는 문제를 해결합니다. Next.js에서는 기본적으로 CSS 모듈을 지원합니다.

 

CSS 모듈 사용 방법

// components/Button.js
import styles from './Button.module.css';

export default function Button({ label }) {
  return <button className={styles.button}>{label}</button>;
}

반응형

/* components/Button.module.css */
.button {
  padding: 10px 20px;
  background-color: #0070f3;
  border: none;
  color: white;
  cursor: pointer;
}

.button:hover {
  background-color: #005bb5;
}

 

· 위 예제에서 Button 컴포넌트는 Button.module.css 파일로부터 스타일을 가져와 사용합니다. 이때, 클래스 이름은 자동으로 해시 처리되어 충돌을 방지합니다.

 

CSS 모듈의 장단점

· 장점: 스타일의 범위가 컴포넌트로 제한되어 유지보수가 쉽고, 클래스 이름 충돌이 발생하지 않습니다.
· 단점: 전역 스타일을 적용하기 어렵고, 복잡한 UI를 구성할 때 모듈 간 스타일을 공유하기가 까다로울 수 있습니다.

 

 

3. styled-components

 

styled-components란?

· styled-components는 CSS-in-JS 라이브러리로, JavaScript 파일 내에서 스타일을 작성하고, 해당 스타일이 적용된 컴포넌트를 생성할 수 있습니다. 스타일이 컴포넌트의 일부로 취급되므로, 코드의 가독성과 유지보수성이 향상됩니다.

 

styled-components 사용 방법

npm install styled-components

SMALL

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

const StyledButton = styled.button`
  padding: 10px 20px;
  background-color: #0070f3;
  border: none;
  color: white;
  cursor: pointer;

  &:hover {
    background-color: #005bb5;
  }
`;

export default function Button({ label }) {
  return <StyledButton>{label}</StyledButton>;
}

 

· StyledButton이라는 변수를 만들어, 여기에 스타일을 정의한 후 컴포넌트로 사용할 수 있습니다. 이 방식은 CSS와 컴포넌트 로직이 하나의 파일에 묶여 있어 관리가 용이합니다.

 

styled-components의 장단점

· 장점: 조건부 스타일링, 컴포넌트 스타일링의 재사용성, 전역 테마 설정 등이 가능하며, JavaScript의 모든 기능을 활용할 수 있습니다.
· 단점: 런타임 시 스타일이 적용되므로, 큰 규모의 프로젝트에서 성능 이슈가 발생할 수 있습니다. 또한, 기존 CSS 작성 방식에 익숙한 개발자에게는 학습 곡선이 존재합니다.

 

 

4. CSS 모듈과 styled-components 비교

 

코드 가독성

· CSS 모듈은 CSS 파일을 그대로 사용하기 때문에 기존 CSS와 친숙한 개발자에게 더 쉽게 다가올 수 있습니다. 반면, styled-components는 JavaScript 내에 스타일을 작성하므로, 하나의 파일에서 컴포넌트와 스타일을 함께 관리할 수 있어 가독성이 좋아집니다.

 

재사용성

· styled-components는 스타일의 재사용성과 확장성이 뛰어나고, 조건부 스타일링이 용이합니다. CSS 모듈은 컴포넌트 단위로 스타일을 독립적으로 관리하지만, 스타일 간 공유가 어려울 수 있습니다.

퍼포먼스

· CSS 모듈은 정적 CSS를 사용하므로 성능에 유리합니다. styled-components는 동적 스타일링의 강점을 가지고 있지만, 런타임에서의 성능이 다소 떨어질 수 있습니다.

 

프로젝트 규모에 따른 선택

· 작은 프로젝트나 간단한 스타일링이 필요한 경우 CSS 모듈이 적합합니다. 복잡한 스타일링, 동적 스타일링, 또는 테마 관리가 필요한 큰 규모의 프로젝트에서는 styled-components가 더 유용할 수 있습니다.

 

 

5. Next.js에서 스타일링 접근법 선택하기

 

프로젝트 요구사항 분석

· 프로젝트의 규모, 스타일링 복잡도, 팀의 스타일링 방식에 대한 경험을 고려하여 적합한 방법을 선택합니다.

 

혼합 사용 가능성

· CSS 모듈과 styled-components를 혼합하여 사용하는 것도 가능합니다. 예를 들어, 글로벌 스타일이나 단순한 컴포넌트에는 CSS 모듈을, 복잡한 스타일링에는 styled-components를 적용하는 방식입니다.

 

이번 강의에서는 Next.js에서 컴포넌트를 스타일링하는 두 가지 주요 방법인 CSS 모듈과 styled-components를 비교하고, 각각의 장단점을 학습했습니다. 적절한 스타일링 접근법을 선택함으로써 프로젝트의 유지보수성과 확장성을 높일 수 있습니다.

 

 

- 이전 수업 목록