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

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

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에서 사용할 수 있는 주요 스타일링 옵션을 소개했습니다. 각 방법의 특징을 잘 이해하고 프로젝트에 맞는 스타일링 방법을 선택하세요.

6. 컴포넌트 사용하기 – Next.js에서의 컴포넌트 관리와 활용

 Next.js는 React 기반의 프레임워크로, 컴포넌트 기반 개발을 지원합니다. 이번 글에서는 Next.js에서 컴포넌트를 어떻게 효율적으로 관리하고 활용할 수 있는지에 대해 알아보겠습니다. 초보자도 쉽게 이해할 수 있도록 설명할 예정이니, 천천히 따라와 주세요.

1. 컴포넌트란 무엇인가요?

컴포넌트는 React에서 UI를 구성하는 작은 단위입니다. Next.js에서도 컴포넌트는 화면을 구성하는 중요한 요소로, 코드의 재사용성과 유지보수성을 높이는 데 중요한 역할을 합니다.

Next.js에서는 컴포넌트를 폴더와 파일로 나누어 관리합니다. 예를 들어, components라는 폴더를 만들고 그 안에 각각의 UI 구성 요소를 파일로 분리할 수 있습니다.

예시: 간단한 컴포넌트 만들기

// components/Button.js
export default function Button({ label }) {
  return <button>{label}</button>;
}

위의 Button 컴포넌트는 재사용 가능한 버튼을 생성하는 컴포넌트입니다. label이라는 속성(props)을 받아 버튼에 표시할 텍스트를 동적으로 바꿀 수 있습니다.

2. Next.js에서의 컴포넌트 관리

Next.js에서는 컴포넌트를 어떻게 관리할 수 있을까요? 컴포넌트를 잘 관리하려면 폴더 구조를 잘 짜는 것이 중요합니다. 일반적으로, components 폴더를 만들어 필요한 컴포넌트들을 그 안에 넣고, 하위 폴더를 사용해 컴포넌트들을 그룹화할 수 있습니다.

예시: 컴포넌트 폴더 구조

/components
  /Button
    Button.js
    Button.module.css
  /Header
    Header.js
    Header.module.css

위와 같이 컴포넌트의 종류별로 폴더를 나누면, 코드의 가독성과 유지보수성이 높아집니다.

3. 컴포넌트의 활용

Next.js에서는 컴포넌트를 다양한 방식으로 활용할 수 있습니다. 예를 들어, 페이지를 구성하는 컴포넌트와 UI를 구성하는 컴포넌트를 분리하여 작성할 수 있습니다. 이를 통해 코드의 재사용성을 높이고, 복잡한 UI도 효율적으로 관리할 수 있습니다.

예시: 페이지에서 컴포넌트 사용하기

// pages/index.js
import Button from '../components/Button/Button';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Button label="클릭하세요" />
    </div>
  );
}

위의 예시에서 Button 컴포넌트를 페이지에서 불러와 사용하고 있습니다. 이렇게 컴포넌트를 활용하면, 다른 페이지나 컴포넌트에서 동일한 UI 요소를 재사용할 수 있습니다.

4. 컴포넌트의 스타일링

Next.js에서 컴포넌트를 스타일링하는 방법은 여러 가지가 있습니다. 그중에서 CSS Modules를 사용하면, 각 컴포넌트의 스타일을 독립적으로 관리할 수 있어 좋습니다.

예시: CSS Modules 사용하기

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

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

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

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

위의 예시처럼 Button.module.css 파일을 사용하여 해당 컴포넌트의 스타일을 독립적으로 관리할 수 있습니다. 이 방식은 스타일이 다른 컴포넌트와 겹치지 않도록 해줍니다.

5. 결론

Next.js에서 컴포넌트를 관리하고 활용하는 방법에 대해 살펴보았습니다. 컴포넌트는 UI를 구성하는 중요한 요소로, 효율적으로 관리하고 활용하면 프로젝트의 유지보수성과 재사용성이 크게 향상됩니다. 컴포넌트의 활용 범위를 넓히고, 코드의 재사용성을 높이는 것이 좋은 개발 습관입니다.

컴포넌트를 잘 관리하고 활용하는 방법을 잘 익혀두면, 더 효율적이고 깔끔한 코드를 작성할 수 있습니다.