1. 스타일링
- Next.js의 스타일링은 리액트의 스타일링과 방식이 동일합니다.
- pages/index.tsx - 파일을 스타일링하기 위해 css 파일을 만들어봅니다.
- pages/index.css - tsx 파일과 동일한 위치에 css 파일을 생성했습니다.
- 그리고 tsx에 css 파일을 import했습니다.
import "./index.css";- 그런데 오류가 발생했습니다.
- 글로벌 css 파일은 App 컴포넌트가 아닌 곳에서는 불러올 수 없다고 합니다.
2. 글로벌 CSS 사용 불가
- 왜 이런 오류가 발생하는 걸까요?
- 페이지 이동 시에 css 파일이 중첩되어 원하지 않는 결과를 불러올 수 있기 때문입니다.
- 예를 들어 아래와 같은 css 파일이 있다고 생각해봅시다.
index.css - .h1 { color: red; }
test.css - .h1 { color: blue; }- 사용자가 index 페이지에 접근하면 index.css 파일을 불러옵니다.
- 그리고 뒤이어 test 페이지에 접근하면 test.css 파일을 불러옵니다.
- 이때 두개의 css 파일이 중첩되어, 중복되는 선택자가 생기면 의도한 것과 다른 결과가 렌더링될 수 있게 됩니다.
- (물론 중복이 발생하지 않는 선택자만 사용한다면 문제가 되지 않을 것입니다.)
- 이러한 부작용을 미연에 방지하고자 _app.tes 컴포넌트가 아닌 곳에서는 글로벌 css 형태를 사용할 수 없게 하는 것입니다.
3. CSS Module
3-1) 의미
- 따라서 Next.js에서는 CSS 모듈 형태를 사용해야 합니다.
- CSS 모듈이란, 개발자가 정의해 둔 선택자들을 다른 파일의 선택자와 중복되지 않도록 고유한 이름으로 변환해주는 기능을 의미합니다.
3-2) 사용방법
- css 파일명을
index.module.css라고 정의합니다. (index.css가 아닙니다!) - 그리고 선택자를 정의해봅니다.
.h1 { color: green; }- 그리고 tsx 파일에서 아래와 같이 import합니다.
import style from "./index.module.css"; // 알맞은 방식
import "./index.css"; // 틀린 방식- 태그의 선택자도 아래처럼 정의합니다.
<h1 className={style.h1}>Index</h1>- Next.js에서는 이렇게 선택자가 중복 적용되는 문제를 원천차단하기 위해 App 컴포넌트를 제외한 모든 컴포넌트는 CSS 모듈을 사용하여 선택자를 자동 변환시킵니다.
Junior Frontend Developer