Next.js CSS와 내장 스타일링 메소드

Styled JSX

CSS-in-JS 라이브러리.

Next.js의 내장 기능이기 때문에 패키지를 설치할 필요 없이 프로젝트를 시작하고 바로 사용할 수 있음.

export default function Button() {
	return (
		<>
			<button className="button">버튼</button>
			<style jsx>{`
				.button {
					padding: 1em;
					border-radius: 1em;
					border: none;
					background: green;
					color: white;
				}
			`}</style>
		</>
	);
}

→ 동적인 CSS 규칙을 만들 수 있음, 다른 컴포넌트에 영향을 주거나 충돌을 일으키지 않음.

모든 컴포넌트에 적용할 CSS 규칙을 만들 때는 global 속성을 지정

export default function Highlight() {
	return (
		<>
			<span>hello</span>
			<style jsx global>{`
				span {
					background: yello;
					font-weight: bold;
				}
			`}</style>
		</>
	);
}

단점

• CSS에 대한 의존성이 점점 더 커지기 때문에 애플리케이션 번들이 더 커지고 느려지기 십상.
• 서버가 미리 CSS 규칙들을 생성해놓아도 클라이언트에서 리액트 하이드레이션이 끝나게 되면 CSS 규칙을 다시 생성해야 함.

CSS Module

CSS 클래스를 충돌이 일어나지 않게 만들면서 실행 시간 동안 성능 부하 없이 리액트 컴포넌트에서 CSS 컴포넌트를 불러올 수 있음.

CSS Module은 각 규칙에 고유한 이름을 만들어서 충돌이 일어나지 않음

:global 키원드를 사용해 전역 CSS 규칙을 만들 수 있음.

.button :global {
	padding: 5px;
	background-color: blue;
}

CSS Module에는 셀렉터 컴포지션이라는 기능이 있다.

통상적으로 사용할 수 있는 규칙을 만들고 composes 속성을 지정해서 일부 속성을 덮어쓸 수 있다.

.button-default {
	padding: 5px;
	background-color: black;
}
.button-green {
	composes: button-default;
	background-color: green;
	color: white;
}
.button-red {
	composes: button-default;
	background-color: red;
	color: black;
}

Next.js는 PostCSS라는 CSS 컴파일 도구를 사용해서 빌드 시점에 CSS Module을 컴파일한다.

그 외에도 Next.js에서는 다음 기능들을 기본적으로 제공한다.

• 자동으로 접두사 추가
  브라우저간 호환성을 유지할 수 있도록 접두사를 자동으로 붙혀줌.
• 모든 브라우저에서의 플렉스박스 버그 수정
• IE11 호환성

SASS

Next.js에서 기본적으로 SASS를 지원.

다만 sass 패키지는 설치해야함.

$ yarn add sass

SASS문법으로 CSS Module을 만들고 사용할 수 있음

ex) Home.module.scss

CSS Module의 composes 속성을 SASS에서는 @extend 키워드를 사용할 수 있음.

.button-default {
	padding: 5px;
	background-color: black;
}
.button-green {
	@extend .button-default;
	background-color: green;
	color: white;
}
.button-red {
	@extend .button-default;
	background-color: red;
	color: black;
}

중첩 셀렉터 기능도 가능

Emotion

Next.js 의 경우 SSR, SSG 상황에서 빌드할 때 CSS 을 넣어줍니다.
하지만 styled-components 를 사용하는 경우 문제가 발생합니다. (Emotion 의 경우 v10 이후 버전 사용하면 ✅)
SSR, SSG 의 경우 사용자가 접속하면 서버에서 만든 HTML 을 사용자에게 주는데 이 때 style 태그가 빈 상태로 넘어가고, 브라우저가 JS 파일을 받아 실행시켰을 때 비로소 스타일이 적용됩니다.
@출처

따라서 styled-components의 경우는 추가 설정이 필요함.

Emotion은 Next.js에서 별도의 추가설정 없이 SSR을 사용할 수 있다.

styled-components와 비교했을 때 비교적 빠른 성능, 작은 번들사이즈가 장점.

하지만 styled-components가 제공하는 심화적인 기능은 사용 불가 (attrs 등..)

UI 프레임워크

많이 사용하는 기능을 추상화하고 서로 다른 UI 간에도 코드 재사용을 최대화, 생산성 향상.

UI 컴포넌트에 테마를 적용할 수 있음. → 원하는대로 수정할 수 있음.

Chakra UI

장점

• 접근성
• 테마
• 밝은/어두운 테마
• 조합
• 타입스크립트 지원

패키지 설치

$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
@chakra-ui/icons

사용하기 위해 ChakraProvider로 감싼다.

import { ChakraProvider } from '@chakra-ui/react';

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

export default MyApp;

ChakraProvider에 theme을 전달해 줄 수 있음.

extendTheme 함수를 사용해서 커스텀 theme을 만들 수 있다.

import { ChakraProvider, extendTheme } from '@chakraui/react'

const customTheme = extendTheme({
	colors: {
		brand: {
			100: '#ffebee', 
			200: '#e57373',
			300: '#f44336',
			400: '#e53935',
		}
	},
});

function MyApp({ Component, pageProps }) { 
	return (
		<ChakraProvider theme={customTheme}> 
			<Component {...pageProps} />
		</ChakraProvider>
	);
}

export default MyApp;

useColorMode 훅을 사용해서 다크모드 등을 쉽게 구현할 수 있음.

반응형 UI를 쉽고 직관적으로 만들 수 있다.

TailwindCSS

TailwindCSS는 효용을 최우선으로 생각하는 CSS 프레임워크

Chakra UI나 MUI 등 대부분의 UI 프레임워크와 달리 TailwindCSS는 오직 CSS 규칙만 제공한다.

→ 컴포넌트를 제공하지 않으므로 필요한 경우 직접 만들어서 사용해야함.

장점

• 프레임워크 독립성
  CSS 규칙일 뿐이기 때문에 리액트, 뷰, 앵귤러, 순수 HTML, 자바스크립트 등에서도 사용할 수 있음
• 테마
• 밝은/어두운 테마 지원
• 높은 수준의 최적화
• 모바일 지원

패키지 설치

$ yarn add D- autoprefixer postcss tailwindcss

테마를 쉽게 구현하기 위한 라이브러리 설치 (선택)

$ yarn add next-themes

TailwindCSS 설정 파일 생성

$ npx tailwindcss init -p

• tailwind.config.js : 사용하지 않는 CSS를 제거하거나 테마 플러그인 등을 설정할 때 사용
• postcss.config.js : TailwindCSS는 PostCSS를 사용하며 이때 postcss.config.js 파일의 설정을 사용함. 이 파일을 수정하여 설정을 변경할 수 있음

빌드할 때 사용하지 않는 CSS 규칙들을 제거하기 위해 tailwind.config.js를 아래와 같이 수정

module.exports = {
	purge: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
	darkMode: 'class',
	theme: {
		extend: {},
	},
	variants: {
		extend: {},
	},
	plugins: [],
};

pages와 components 디렉토리 안의 파일 중 .js .jsx .ts .tsx로 끝나는 파일을 찾은 다음 해당 파일에서 사용하지 않는 CSS를 모두 제거한다.

darkmode 속성값을 ‘class’로 지정한다.

pages/_app.tsx 파일에서 tailwindcss/tailwind.css를 import한다.

import 'tailwindcss/tailwind.css';
// 생략

next-themes 라이브러리에서 ThemeProvider를 불러와 theme을 적용시킬 수 있다.

darkmode 속성값을 ‘class’로 지정했으므로 ThemeProvider의 attribute를 class로 지정하면 메인 태그에 dark css 클래스를 적용한다.

import { ThemeProvider } from 'next-themes';
import TopBar from * ../components/TopBar';
import 'tailwindcss/tailwind.css';

function MyApp({ Component, pageProps }) {
	return (
		<ThemeProvider attribute="class">
			<div className="dark:bg-gray-900 bg-gray-50 w-full min-h-screen">
				<TopBar />
				<Component {...pageProps} /> 
			</div>
		</ThemeProvider> 
	);
}

export default MyApp;

이제 TailwindCSS의 CSS 규칙을 적용할 수 있다.

Headless UI

Headless UI는 그 어떤 CSS 클래스나 스타일도 제공하지 않고 동적 컴포넌트만 제공한다.

그래서 TailwindCSS + Headless UI 조합으로 내장 컴포넌트를 쉽게 꾸밀 수 있음.

패키지 설치

$ yarn add @headlessui/react classnames

import { Menu } from '@headlessui/react';
import cs from 'classnames';

필요한 컴포넌트에서 구조분해 할당으로 작은 단위의 컴포넌트를 가져올 수 있다.

const { Button, Items, Item } = Menu;

TailwindCSS와 Headless UI를 함께 사용해서 내장 컴포넌트를 쉽게 구현해볼 수 있다.