Next.js에 Emotion 적용하기

🌊·2023년 5월 27일
SerializedStylesemotionglobal stylenext.jstheme-provider
2

Next.js

목록 보기
2/2
post-thumbnail

Next.js에 전체적으로 Emotion을 적용하는 방법을 알아보려고 합니다.

회사에서 주로 모바일 웹앱으로 작업을 하다가 새로운 프로젝트를 작업하게 됐는데요.
반응형 웹으로 작업을하고 초기세팅까지 하려고 하니 익숙하지 않은 부분이 많았습니다 😢

Global Style 적용하기

emotion에서 제공하는 Global 컴포넌트를 이용해서 적용할 수 있습니다.

styles/ 디렉터리를 생성한 뒤 Global.tsx 파일을 생성합니다.
그리고 아래와 같이 코드를 작성해줍니다.

// Global.tsx
import { Global, css } from '@emotion/react'

const style = css`
	html,
	body {
		margin: 0;
		padding: 0;
		font-size: 16px;
	}
`

const GlobalStyle = () => <Global styles={styles} />

export default GlobalStyle

해당 파일에 리셋과 관련된 css를 포함해도 좋다고 생각합니다.
최근에는 reset.css와 normalize.css를 섞어서 사용하거나 사용성에 맞게 사용하는 추세라고 합니다.

이후 pages/_app.tsx 에서 해당 Global Style을 적용합니다.

// _app.tsx
import { GlobalStyle } from '@/styles/Global'

const App = ({ Component, pageProps }) => {
	return (
		<Layout>
			<GlobalStyle />
			<Component {...pageProps} />
		</Layout>
	)
}

reset과 normalize
웹 브라우저(chrome, fireforx 등)마다 기본적으로 제공하는 스타일이 다르게 적용되어 있습니다.
브라우저 별로 일관된 스타일을 제공해야 되는 입장으로 이러한 기본적인 스타일을 초기화(reset)하거나 동일하게 유지(normalize)할 필요가 있습니다.


ThemeProvider 적용하기

다크모드나 사용자 테마를 적용하기 위해서 사용되는 컴포넌트입니다.
emotion에서 제공하는 ThemeProvider 컴포넌트를 이용해서 적용할 수 있습니다.

styles/ 디렉터리에서 theme.ts 파일을 생성합니다.

// theme.ts
import { Theme } from '@emotion/react'

const theme: Theme = {
	color: {
		black: '#000',
		white: '#fff',
	}
}

export default theme

이후 pages/_app.tsx에서 테마를 적용합니다.

// _app.tsx
import { GlobalStyle } from '@/styles/Global'
import { ThemeProvider } from '@emotion/react'
import theme from '@/styles/theme'

const App = ({ Component, pageProps }) => {
	return (
	<ThemeProvider theme={theme}>
		<Layout>
			<GlobalStyle />
			<Component {...pageProps} />
		</Layout>
	</ThemeProvider>
	)
}

SerializedStyles 활용하기

반응형 컴포넌트나 레이아웃 사용하기 위해서는 media query와 breakpoint를 피할 수 없는데요.
emotion에서 제공하는 SerializedStyles를 이용해서 조금 더 간편하게 반응형을 사용할 수 있습니다.

media query를 컴포넌트처럼 분리해서 사용하는 방식입니다.
styles/ 디렉터리에 mediaQuery.ts 파일을 생성합니다.


//mediaQuery.ts
import { SerializedStyles, css } from '@emotion/react'

const breakPoints = {
	desktop: 1920,
	tablet: 1439,
	mobile: 767,
}

export const MobileStyle = (style: SerialzedStyles) => css`
	@media screen and (max-width: ${breakPoints.mobile}px) {
		${style}
	}
`

Emotion Composition의 기능을 이용해서 구현합니다.
Emotion Composition은 두 개 이상의 스타일 객체를 결합하여 새로운 객체를 생성합니다.
css 스타일을 넘겨주고 media query가 적용된 스타일을 내보내는 모듈 역할을 합니다.


// styles.ts

import styled from '@emotion/styled'

export const Container = styled.div`
	width: 100%;

	${MobileStyle(css`
		font-size: 1.5rem;
		font-weight: 700;
	`)}
`

매번 media query와 breakpoint를 가져와서 사용하는 것이 아니기 때문에 중복 코드를 줄일 수 있습니다.

마무리

최근에 새로운 프로젝트를 진행하면서 처음 써보는 Next.js와 여러 라이브러리들에 대한 정리를 제대로 하지 못한 것 같습니다. 😭
최근에 Next.js를 비롯해서 ReactQuery, React-Hook-Form 등 처음 사용해보는 기술 및 도구들이 많아졌습니다..
출시 기간에 맞추다보니 이해하지 않고 사용하는 부분들이 많았는데, 이렇게 하나씩 정리하면서 이해하고 사용하는 개발자가 됐으면 합니다.. 🙏

출처

profile
🌊
이전 포스트

Next.js page.tsx 사용하기

0개의 댓글