NextJS에서 React 컴포넌트 스타일링하기 (NextJS React 프로젝트 04)

이전 글에서 NextJS에서 React 컴포넌트를 추가하여 페이지로 확인하는 법을 살펴보았습니다.

 

이번 글에서는 React 컴포넌트 스타일링에 대해서 다룰 것인데요,

그저 css 스타일 속성 주는 것이 왜 주제가 될만한 내용인지 아마 이해하기 어려우실 수도 있습니다.

 

사실 맞습니다! js (혹은 ts) 파일 내부에서 스타일링을 할 수도 있으니까요.

그러나 NextJS에서 별도의 css(혹은 sass, scss) 파일로 컴포넌트 레벨 스타일링을 한다면,

이 부분을 알아두셔야 할 수도 있습니다.

 

 

왜냐하면,

NextJS는 [name].module.css 형식의  CSSModule 방식을 지원하기 때문입니다.

 

* 전역으로 스타일링을 하고 싶다면 해당 css파일을 pages/_app.tsx 에서 import 하면 됩니다

* 단순 .css 파일 형식의 컴포넌트 레벨 스타일링을 하고 싶다면, 가능하지만 별도의 작업이 필요합니다

* css-in-js 형식 (styled component, styled-jsx 방식)을 선호하시는 분은 이 글을 건너뛰셔도 괜찮습니다.

 

 

 

0. sass/scss 사용하기

(css를 사용하시는 분은 건너뛰어도 되고, 이후 설명에서 스타일시트 파일 확장자를 모두 css라고 생각하시면 됩니다)

 

본격적으로 컴포넌트 레벨 스타일링을 하기 전에,

저는 sass/scss를 사용하기 위해 간단한 설치를 했습니다.

npm install sass

 

NextJS는 sass, scss 역시 내제된 방식(CSS Module)으로 지원하기에

이렇게 패키지만 하나 받으면 이후에는 [name].module.scss 형식을 사용하실 수 있습니다.

 

 

 

1. css 파일 생성하기

그럼 한 번 컴포넌트를 스타일링하기 위한 파일을 만들어보겠습니다.

이전 글에서 HomeContainer.tsx라는 파일을 만들었으니, 해당 컴포넌트와 같은 레벨에서

HomeContainer.module.scss 파일을 만들겠습니다.

 

스타일링 방식은 여타 css와 동일합니다!

.container {
  background-color: #dde0ea;
}

.title {
  color: #7c00ff;
}

 

 

 

2. 컴포넌트에 스타일 적용하기

이제 만든 스타일을 HomeContainer.tsx 컴포넌트에 적용해보겠습니다.

import styles from './HomeContainer.module.scss'

const HomeContainer = () => {
  return (
    <div className={styles.container}>
      <h2 className={styles.title}>
        Hi, this is Pumpkin-Raccoon
      </h2>
    </div>
  )
}

export default HomeContainer

 

CSSModule 방식은 같은 클래스명이라도 특정 컴포넌트에만 영향을 주는 방법입니다.

(어떻게 보면 분리된 블록과 같은 '컴포넌트' 방식과 잘 맞는 셈이죠)

 

방식은 위와 같은데요, 생성한 css 파일을 styles라는 이름으로 import합니다.

(꼭 styles라고 할 필요는 없지만, 보통 그렇게 많이 쓰는 듯 해요)

 

그리고 html 태그의 className에 styles.[만든 클래스명]을 적어주면 됩니다.

저는 container, title이라는 이름의 클래스를 만들어서 

styles.container, styles.title을 적용한 것입니다.

 

실행해보면 이렇게 원하는대로 적용된 것을 확인할 수 있습니다!

 

 

 

 

(참고). css 파일만 모아두고 싶다면?

저는 별도의 css 파일을 해당 컴포넌트 파일과 같은 레벨에 두는 편입니다.

그러나 css 파일을 루트의 styles 폴더와 같은 공간에 모아두고 싶은 분도 있을 수 있죠.

(create-next-app으로 생성된 디폴트 프로젝트도 그렇게 되어있구요)

 

그런 경우에는 루트 디렉토리에 next.config.js라는 파일을 만들어서

sass compiler를 설정해주면 됩니다.

 

다음과 같이 말이죠!

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

 

 

이제 NextJS에서 컴포넌트를 만들고, 스타일링하는 방법까지 모두 배웠습니다!

그럼 멋지게 웹사이트를 꾸며볼까요??