린찬승하우스: 7. 스타일링 옵션 – CSS, SCSS, CSS-in-JS 등을 Next.js에서 사용하는 방법

2025년 1월 18일 토요일

7. 스타일링 옵션 – CSS, SCSS, CSS-in-JS 등을 Next.js에서 사용하는 방법

Next.js는 React 기반의 프레임워크로, 다양한 스타일링 방법을 지원합니다. 스타일링 방법에 따라 코드 관리와 유지보수성이 달라지기 때문에, 자신에게 맞는 스타일링 옵션을 잘 선택하는 것이 중요합니다. 이번 글에서는 Next.js에서 사용할 수 있는 스타일링 옵션인 CSS, SCSS, CSS-in-JS에 대해 살펴보겠습니다.

Next.js 스타일링, SCSS 사용법, CSS-in-JS, styled-components, CSS Modules, Next.js SCSS, React 스타일링

1. CSS 사용하기

Next.js는 기본적으로 CSS 파일을 지원합니다. CSS 파일을 사용하면, 전통적인 방식으로 스타일을 정의하고 HTML 요소에 적용할 수 있습니다. Next.js에서는 Global CSS와 CSS Modules 두 가지 방식을 사용할 수 있습니다.

예시: Global CSS 사용하기

pages/_app.js 파일에 글로벌 스타일을 추가할 수 있습니다. 글로벌 CSS 파일을 사용하면, 애플리케이션 전반에 동일한 스타일을 적용할 수 있습니다.


/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}


// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

이렇게 글로벌 CSS를 적용하면, 모든 페이지에서 해당 스타일을 사용할 수 있습니다.

예시: CSS Modules 사용하기

CSS Modules는 각 컴포넌트별로 스타일을 독립적으로 관리할 수 있는 방법입니다. Next.js는 CSS Modules를 기본적으로 지원하므로, 스타일이 다른 컴포넌트와 겹치지 않도록 할 수 있습니다.


/* styles/Button.module.css */
.button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}


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

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

이 방식은 각 컴포넌트마다 고유한 클래스를 적용하여 스타일 충돌을 방지할 수 있습니다.

2. SCSS 사용하기

SCSS는 CSS의 상위 언어로, 변수, 중첩된 규칙, 믹스인(mixin) 등을 사용할 수 있어 더 강력한 스타일링을 제공합니다. Next.js는 SCSS를 지원하므로, 프로젝트에서 SCSS 파일을 쉽게 사용할 수 있습니다.

예시: SCSS 사용하기

먼저 SCSS 파일을 사용하려면 sass 패키지를 설치해야 합니다.


npm install sass

그 후 SCSS 파일을 작성하고, Next.js에서 이를 사용할 수 있습니다.


/* styles/Button.module.scss */
$primary-color: #0070f3;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}


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

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

이렇게 SCSS를 사용하면, 변수나 믹스인 등을 활용하여 보다 효율적이고 관리하기 쉬운 스타일링을 할 수 있습니다.

3. CSS-in-JS 사용하기

CSS-in-JS는 자바스크립트 파일 내에서 직접 CSS를 작성하는 방법입니다. 스타일을 JavaScript 객체로 작성하고, 이를 React 컴포넌트에 적용할 수 있습니다. styled-components와 @emotion/react 같은 라이브러리가 많이 사용됩니다.

예시: styled-components 사용하기

먼저 styled-components 라이브러리를 설치합니다.


npm install styled-components

그 후, JavaScript 파일 내에서 CSS를 작성할 수 있습니다.


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

const Button = styled.button`
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;

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

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

styled-components를 사용하면, 스타일과 컴포넌트를 하나의 파일로 관리할 수 있어 코드의 응집도를 높일 수 있습니다.

4. 결론

Next.js에서는 CSS, SCSS, CSS-in-JS와 같은 다양한 스타일링 옵션을 제공하여, 개발자가 원하는 방식으로 스타일을 적용할 수 있습니다. 프로젝트의 규모나 팀의 요구 사항에 따라 적합한 스타일링 방식을 선택하면, 코드 관리와 유지보수에 큰 도움이 됩니다.

CSS는 전통적인 방법으로 스타일을 적용하는 데 유용합니다.
SCSS는 더 복잡한 스타일을 작성할 때 강력한 기능을 제공합니다.
CSS-in-JS는 스타일과 컴포넌트를 하나로 묶어 관리할 수 있어 코드의 응집도를 높입니다.

이 글에서는 Next.js에서 사용할 수 있는 주요 스타일링 옵션을 소개했습니다. 각 방법의 특징을 잘 이해하고 프로젝트에 맞는 스타일링 방법을 선택하세요.

린찬승하우스