블로그만들기(4) - styled-component

이전 프로젝트에서는 페이지, 컴포넌트를 디자인하기 위해 css-in-js 라이브러리인 @emotion을 통해 styled component를 생성해서 디자인을 진행했는데 이번 프로젝트에서는 styled-component 라이브러리를 통해 디자인했다.

styled-component를 통해 코드를 작성하기 전에 먼저 설정해주어야하는 부분이 있다.

Next.js Docs에서는 css-in-js라이브러리를 사용하기 위해서는 SSR에서 제대로 작동할 수 있도록 pages/_document.js에서 renderPage를 커스터마이징해주어야 한다.

Custom Document - https://nextjs.org/docs/advanced-features/custom-document

Docs에서 제공해준 예시 코드는 다음과 같다.

import Document from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const originalRenderPage = ctx.renderPage

    // renderPage :  초기 페이지 로드 시 서버 측 자식 구성 요소의 스타일을 분석
    ctx.renderPage = () =>
      originalRenderPage({
        // useful for wrapping the whole react tree
        enhanceApp: (App) => App,
        // useful for wrapping in a per-page basis
        enhanceComponent: (Component) => Component,
      })

    // Run the parent `getInitialProps`, it now includes the custom `renderPage`
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }
}

export default MyDocument

renderPage를 커스텀해주었으니 이제 모듈을 npm을 통해 install하자.

npm i --save styled-components
npm i --save-dev @types/styled-components

설치한 뒤 나는 styles라는 디렉터리에 파일을 생성하고 초기 CSS 설정을 하기 위해 styled-component의 createGlobalStyle 메서드를 통해 코드를 작성,

// @styled/default.js
import { createGlobalStyle } from 'styled-components';

export const InitStyle = createGlobalStyle`
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	html, body {
		margin: 0;
		padding: 0;
	}
	body {
		line-height: 1;
		font-size: 14px;
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", 나눔고딕, "Nanum Gothic", "Noto Sans KR", "Noto Sans CJK KR", arial, 돋움, Dotum, Tahoma, Geneva, sans-serif;
		-webkit-font-smoothing: antialiased;
		color: rgb(33, 37, 41);
		background: #fafafa;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	button {
		outline: none;
		border: none;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		outline: none;
		word-break: break-word;
		border: none;
	}
`;

Next.js에서 제공하는 pages/_app.tsx에서 InitStyle을 import하여 사용해주었다.

import React from 'react';
import { AppProps } from 'next/app';
import { InitStyle } from '@styles/default';

const App = ({ Component, pageProps }: AppProps) => {
	return (
		<>
			<InitStyle />
      		<Component {...pageProps} />
		</>
	);
};

export default App;

그리고 레이아웃 컴포넌트들을 디자인해주고 pages/_app.js에 추가해주었다.

하지만, 스타일드 컴포넌트를 통해 작성한 디자인이 적용되기 전에 렌더링되는 문제가 발생했다.

해당 문제는 이전에 겪어본 문제이기 때문에 방법을 떠올려 해결해주었다.

먼저 babel-plugin-styled-components 모듈을 설치해준 뒤, .babelrc 파일을 생성하고 아래의 코드를 삽입한다.

{
	"presets": ["next/babel"],
	"plugins": [
		[
			"styled-components",
			{
				"ssr": true,
				"displayName": true,
				"preprocess": false
			}
		]
	]
}

잘 적용이 된 모습을 확인할 수 있다.