Next.js 스타일링 팁 (classnames, postCSS, Sass)

튜토리얼 잘 따라오고 있어?

오늘은 쉬어가는 페이지!

알아두면 좋은 몇가지 라이브러리들을 소개할께! 

지금당장은 중요하지 않으니 이번 튜토리얼은 스킵해도 좋아! 

Photo by  Branko Stancevic  on  Unsplash

깔끔하게 classname 초이스! - classnames

리액트 하다보면 조건에 따라서 클래스이름을 바꿔야 할때가 자주 있을꺼야. 조건문이 하나두개정도면 뭐 그냥 하면 되겠지만, 설정페이지 같이 조건이 많이 들어가야 하는 페이지는 코드가 복잡해 지겠지? 요걸 심플하게 작성할수 있도록 도와주는 라이브러리가 있어!

"classnames"

사용하는 코드 먼저 볼까?

import styles from './resultPopup.module.css'
import cn from 'classnames'

export default function ResultPopup({ children, type }) {
  return (
    <div
      className={cn({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error'
      })}
    >
      {children}
    </div>
  )
}

resultPopup.module.css

.success {
  color: blue;
}
.error {
  color: red;
}

cn이라는 이름으로 import해서 실제로 코드를 보면 어때? 

type 값이 여러 종류의 string으로 들어오는데, 마치 switch문 같은 모양새(switch문은 아닌거 알지?) 로 읽기편하게 작성 할 수 있다구!

너없이 어떻게 살았을까 싶을 정도로 필두 라이브러리야

https://github.com/JedWatson/classnames사이트에 예제가 많으니까 한번 확인해보는걸 추천!

간단히 npm install classnames 로 설치 완료!

 

PostCSS

Next.js는 내부적으로 PostCSS를 사용해서 컴파일해.

모든 마법같은 기능을 요 PostCSS 해주고 있지.

아마 나보다 PostCSS를 잘 아는 친구들은 요걸 커스텀 해보고 싶을꺼야! 아니라면 요건 스킵!

단순히 프로젝트 루트 디렉토리에 postcss.config.js 를 생성해주면 커스텀 완료!

Tailwind CSS 같은 CSS framework를 쓴다면 아래 같이 작성이 가능해

module.exports = {
  plugins: [
    'tailwindcss',
    ...(process.env.NODE_ENV === 'production'
      ? [
          [
            '@fullhuman/postcss-purgecss',
            {
              content: [
                './pages/**/*.{js,jsx,ts,tsx}',
                './components/**/*.{js,jsx,ts,tsx}'
              ],
              defaultExtractor: content =>
                content.match(/[\w-/:]+(?<!:)/g) || []
            }
          ]
        ]
      : []),
    'postcss-preset-env'
  ]
}

 

Sass

Sass 아는 친구들은 이미 css의 답답함을 넘어 유용한 문법을 즐기고 있을꺼야!

Next.js는 .scss와 .sass확장자 파일을 사용해서 sass를 사용할수 있어. 심지어 .module.scss나 .module.sass라고 치면 CSS Module도 활용할수 있다고! 

확실히 하기 위해  npm install sass 로 설치 고고싱!

 

 

다음시간에는 Next.js 킬링 포인트! 페이지를 미리 생성해 두는 Pre-rendering에 대해 알아보자!

https://ppsu.tistory.com/63?category=853184

Next.js 킬포! Pre-rendering

고고싱!