Next JS 에서 스타일링을 적용하는 다양한 방법

Next JS 에서의 대표적인 스타일링 방법 3가지 알아보기

• Next JS 는 취향에 맞게 다양한 스타일링 기법을 제공한다.
• 대표적인 스타일링 기법은 총 3가지가 있다.
  • Module-Level CSS: [name].module.css 파일을 이용하는 방법이다.
  • CSS-in-JS: 반환 컴포넌트에 style 속성을 정의하고 JS 오브젝트를 넣는 방식이다.
  • Global CSS: 우리가 보통 아무런 프레임워크를 사용하지 않을 때 단순하게 CSS 파일을 삽입해 스타일링하는 방식과 같은 방식이다.

여담으로 나는 요즘 tailwind css 를 이용하여 스타일링을 많이 하고 있다. tailwind CSS 를 이용하면 보통 클래스 속성에 디자인 키워드를 추가하는 방식으로 스타일링을 하게 된다.

Component-Level CSS: [name].module.css 파일을 이용하는 방법

• 이 방식은 이름처럼 Component level, 즉 컴포넌트 수준의 스타일링이 가능하다.
• 보통 스타일링을 하다보면 내가 의도하지 않은 부분까지 스타일링이 되는 경우가 있는데, 이 스타일링 기법을 통해 내가 의도하지 않은 부분까지 스타일링이 적용되는 것을 어느정도 막을 수 있다.

module.css 기능을 이용하지 않을 때

<nav style={{ backgroundColor: "tomato" }}></nav>

• 보통은 위와 같이 style 에 js 스타일 오브젝트를 넣는 방식 즉 CSS-in-JS 방식을 많이 이용하게 된다.

module.css 기능을 이용한다면

NavBar.module.css

.nav {
  display: flex;
  justify-content: space-between;
  background-color: tomato;
}

NavBar.js

<nav className={styles.nav}></nav>

• js 오브젝트가 아닌 CSS 형태를 그대로 사용할 수 있다.
• NavBar 라는 컴포넌트에 특화된 NavBar.module.css 파일을 만들어 NavBar 에 특화된 스타일링이 가능하다.

실제 HTML 렌더링 결과

<nav class="NavBar_nav__OBiyO"></nav>

• 클래스 이름이 우리가 정의한대로 정직하게 nav 라고 들어가는 것이 아니라, NavBar_nav__0Biy0 과 같이 들어가 스타일링이 충돌하는 상황을 예방해준다.

조건부 스타일링

<nav>
  <Link href="/">
    <a className={router.pathname === "/" ? styles.active : ""}>Home</a>
  </Link>

  <Link href="/about">
    <a className={router.pathname === "/about" ? styles.active : ""}>About</a>
  </Link>
</nav>

• 위와 같이 조건문으로 active 하는 방식으로 응용도 가능하다.

2개 이상의 스타일링: interpolation 을 이용하는 방법

<nav>
  <Link href="/">
    <a
      className={`${styles.link} ${
        router.pathname === "/" ? styles.active : ""
      }`}
    >
      Home
    </a>
  </Link>

  <Link href="/about">
    <a
      className={`${styles.link} ${
        router.pathname === "/about" ? styles.active : ""
      }`}
    >
      About
    </a>
  </Link>
</nav>

• 핵심은 className 속성 내부에 백틱 문자로 클래스를 구성하고 interpolation 과 띄어쓰기를 이용하는 것이다.

2개 이상의 스타일링: 배열을 이용하는 방법

<Link href="/">
    <a className={[styles.link, router.pathname === "/" ? styles.active : ""].join(" ")}>Home</a>
</Link>

<Link href="/about">
    <a className={[styles.link, router.pathname === "/about" ? styles.active : ""].join(" ")}>About</a>
</Link>

• 배열에 join() 메서드를 이용하여 응용했다.

단점

• 매번 파일을 옮겨다니며 내용을 바꾸거나 확인해야 한다.
• CSS 에 로직이 들어가서 한 눈에 보여지진 않는다.
  • 파일을 이동하며 내가 어떻게 스타일링했는지 다시 찾아봐야 된다.

CSS-in-JS: Styles JSX 를 이용하는 방법

• 보통 아주 간단한 프로젝트에서 컴포넌트 내부에 style 속성 하나쯤 들어가도 별로 복잡해보이지 않는다면, 가장 쉽게 사용할 수 있는 방식이다.

CSS-in-JS 의 가장 기본적인 방법

function HiThere() {
  return <p style={{ color: "red" }}>hi there</p>;
}

export default HiThere;

이렇게 style 에 직접 JS 오브젝트를 넣는 것이 CSS-in-JS 의 가장 기본적인 방법이다.

Styles JSX 사용하기

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

• 컴포넌트별로 스타일을 완전히 격리시켜서 사용할 수 있다.
• 아래와 같은 양식으로 편리하게 CSS 를 구성할 수 있다. 일반적으로 .css 파일에서 구성하는 것과 비슷하다.

<style jsx>{`
  .selector {
    color: red;
  }
`}</style>

글로벌 CSS 추가하기

글로벌 CSS 를 추가하고 싶다면, pages/_app.js 에 CSS 파일을 추가하면 된다. 이를테면 아래의 CSS 를 작성하고 다음과 같이 import 해주자.

body {
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

위와 같이 styles.css 라는 css 파일을 작성했다.

import "../styles.css";

// 이 export default 함수가 필요하다.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

위와 같이 pages/_app.js 에 import styles.css 를 하면, 모든 페이지에 적용된다. 중복 적용 혹은 충돌을 피하기 위해서 pages/_app.js 에서만 import 함을 분명히 해두자.

개발에서 이러한 방식으로 css 를 표현하면 편집하면서 css 를 hot-reload 할 수 있게 해준다. 이는 애플리케이션의 상태를 유지할 수 있음을 뜻한다.

프로덕션에서는 모든 CSS 파일들이 자동으로 minified 된 .css 파일로 합쳐진다.

TIP: 스타일링 시 하이라이팅을 위한 확장 프로그램

• 비주얼 스튜디오 코드를 사용중이라면, 스타일 하이라이팅 확장 프로그램으로 생산성을 높일 수 있다.
• 사실 vscode-styled-components 만으로도 문법 하이라이팅은 가능하다.
• 하이라이팅 시 아래와 같이 코드가 예쁘게 색칠된다.

 

공식문서 추천 Extension 을 이용하는 것이 좋다.

Syntax Highlighting Visual Studio Code Extension
Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install Divlo.vscode-styled-jsx-syntax

If you use Stylus instead of plain CSS, install vscode-styled-jsx-stylus or paste the command below.

ext install vscode-styled-jsx-stylus

Autocomplete Visual Studio Code Extension
Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install Divlo.vscode-styled-jsx-languageserver

레퍼런스

https://nextjs.org/docs/basic-features/built-in-css-support