Next.js 스타일링 방식
스타일링이란 CSS로 UI를 예쁘게 만드는 걸 말합니다. 넥스트에서 스타일링하는 방법은 크게 다음 3가지 방식이 있습니다.
- CSS Modules
- CSS-in-JS
- CSS 프레임워크 사용(테일윈드 등)
이 3가지 스타일링 방식은 Next.js 프로젝트 뿐만 아니라 일반 리액트 프로젝트에서도 사용할 수 있습니다.
CSS Modules
CSS 모듈(CSS Modules) 방식은 웹 개발 초창기의 전역 스타일 시트(Global Stylesheets) 방식과 다르게 리액트 컴포넌트 별로 CSS 스타일 적용 범위를 국한하여 스타일링 하는 방식을 말합니다. 참고로 전역 스타일 시트 방식은 하나의 HTML 파일에 하나의 CSS 파일을 로딩하여 스타일링하는 방식을 말합니다.
CSS 모듈 방식으로 스타일링 하려면 특정 컴포넌트에 해당되는 스타일 시트를 컴포넌트명.module.css 파일로 작성하고 리액트 컴포넌트에서 아래와 같이 로딩합니다.
.primary {
color: blue;
}
import styles from './button.module.css'
export function Button() {
return <button className={styles.primary}>Hello</button>
}
위 코드는 버튼 컴포넌트에서 button.module.css라는 스타일 시트를 로딩하고 className 속성에 해당 스타일 시트의 클래스 스타일을 연결한 코드입니다. 최종적으로 화면에 텍스트가 파란색인 버튼이 그려질 겁니다.
CSS 모듈 방식에서는 꼭 스타일 시트의 확장자를 module.css로 해야 합니다.
전역 스타일 시트 사용 방법
CSS 모듈 방식을 쓰면서도 애플리케이션 전체에 공통으로 적용되어야 하는 reset.css, global.css와 같은 파일이 있을 겁니다. 이 파일들은 넥스트에서 어떻게 적용해야 할까요?
전역 스타일 시트는 모두 pages/_app.js이라는 커스텀 앱 컴포넌트에 등록해야 합니다.
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
import './global.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
전역 스타일 시트를 커스텀 앱 컴포넌트에 등록해야 하는 이유는 전역 스타일 시트가 애플리케이션에서 한번만 로딩되어야 하는 특성 때문입니다. 만약 이런 제약 조건이 없다면 여기 저기서 스타일 시트를 로딩하다가 충돌날 수 있습니다.
CSS-in-JS
CSS in JS 방식은 CSS 스타일을 별도의 스타일 시트로 관리 하지 않고 JS 파일에 작성하는 방식을 말합니다. 흔히 리액트 프로젝트를 하면 이모션(Emotion), 스타일드 컴포넌트(Styled Component)와 같은 CSS-in-JS 라이브러리를 사용하는데 넥스트에서도 동일하게 이 라이브러리들을 사용할 수 있습니다.
JS 파일에 CSS 스타일을 작성하는게 어떤건지 코드로 살펴보겠습니다.
function Button() {
return <button style={{ color: 'blue' }}>Hello</button>
}
앞에서 살펴본 버튼 컴포넌트 코드를 CSS-in-JS 방식으로 작성했습니다. style 속성에 스타일 값을 적용할 때 {{}} 중괄호가 두번 들어갑니다. 첫 번째 중괄호는 style 속성에 자바스크립트 값을 연결하겠다는 의미이고, 두 번째 중괄호는 CSS 스타일 값을 객체로 정의한 겁니다. 위 코드를 아래 코드와 비교하면 좀 더 이해하기 쉽습니다.
function Button() {
const buttonStyle = { color: 'blue' };
return <button style={buttonStyle}>Hello</button>
}
이처럼 CSS-in-JS 방식을 이용하면 자바스크립트로 CSS 스타일 코드를 작성할 수 있습니다.
CSS 프레임워크 사용
CSS 프레임워크란 특정 디자인 테마를 기반으로 제작된 UI 라이브러리를 의미합니다. 대표적으로 부트스트랩(Bootstrap), Material UI, Ant Design, 테일윈드 등이 있습니다. 넥스트 공식 문서에서는 테일윈드를 대표로 설정하는 방법을 안내합니다. 자세한 내용은 아래 설정 가이드를 참고하세요.
CSS 확장 언어 사용
CSS 확장 언어란 Sass, Less와 같은 CSS 전처리기를 의미합니다. 실무에서는 주로 확장 언어를 이용하여 스타일 코드를 작성하는데요. 이 확장 언어들은 사용할 때 보통 팩이나 Gulp와 같은 도구에 별도의 세팅을 해주어야 합니다. 다행히 넥스트에서는 대중적인 확장 언어 Sass에 대해 기본적인 세팅을 제공합니다. 넥스트 프로젝트를 생성하고 나서 다음과 같이 Sass 라이브러리와 설정을 추가합니다.
npm install --save-dev sass
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
더 자세한 내용은 다음 문서를 참고하세요.