TIL - 2022.08.02

TIL - 2022.08.02

Next.js에서 스타일 적용하기

style 속성

각각의 태그에 style을 인라인으로 적용하는 방법이다.

// index.tsx

import type { NextPage } from "next";

const Home: NextPage = () => {
  return <div style={{ color: "orange" }}>Home</div>;
};

export default Home;

module.css

// index.tsx

import type { NextPage } from "next";
import styles from "../styles/home.module.css";

const Home: NextPage = () => {
  return <div className={styles.content}>Home</div>;
};

export default Home;

/* home.module.css */

.content {
	color:orange;
}

xxx.module.css와 같이 css 파일을 만든 뒤 컴포넌트에서 import 해서 사용하는 방법이다.

xxx는 컴포넌트의 이름과 같을 필요는 없으며, className 속성에 위와 같이 import 한 별칭.클래스명처럼 값을 넘겨주면 된다.

여러 클래스를 동시에 적용하고 싶다면 어떻게 하면 될까?

// index.tsx

import type { NextPage } from "next";
import styles from "../styles/hi.module.css";

const Home: NextPage = () => {
  return (
    <>
      <div className={[styles.content, styles.textLg].join(" ")}>
        Large
      </div>
      <div className={`${styles.content} ${styles.textSm}`}>
        Small
      </div>
    </>
  );
};

export default Home;

/* home.module.css */

.content {
  color: orange;
}

.textLg {
  font-size: 30px;
}

.textSm {
  font-size: 15px;
}

위와 같이 배열로 클래스명을 나열한 뒤 join 메소드를 사용하거나, 백틱 문자 내에 각각의 클래스명을 나열하면 된다.

module.css 방식의 장점은 각각의 className이 유니크한 값을 가지기 때문에 중복이 발생하지 않는다는 것이다.

하지만 별도의 파일을 만들어 관리해야 하기 때문에 불편함이 느껴진다.

Styled JSX

Vue에서 사용하는 <styled scoped> 와 유사하게 사용할 수 있다.

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <>
      <div className="content textLg">Large</div>
      <div className={`content textSm`}>Small</div>

      <style jsx>
        {`
          .content {
            color: orange;
          }

          .textLg {
            font-size: 30px;
          }

          .textSm {
            font-size: 15px;
          }
        `}
      </style>
    </>
  );
};

export default Home;

컴포넌트 내에 <style jsx> 를 입력한 뒤 백틱 문자 내에 스타일을 작성하면 된다.

한 파일 내에서 관리할 수 있어 편할 뿐만 아니라, module.css 방식과 마찬가지로 클래스명이 랜덤하게 지정되기 때문에 다른 컴포넌트 내의 클래스명과 중복이 생길 일이 없다.

Global Style
위와 같이 작성하면 해당 컴포넌트 내에서만 스타일이 적용되기 때문에 다른 컴포넌트에서도 사용하고 싶다면 <style jsx global> 과 같이 global 속성을 추가해줘야 한다.

글로벌 스타일의 범위도 한정되어 있는데, 모든 컴포넌트에 적용되는 것이 아니다.

pages 디렉토리 내 index 와 about 컴포넌트가 있다고 가정해보자.
index 컴포넌트에서 적용한 글로벌 스타일은 about 컴포넌트에는 적용되지 않는다.
하지만 index에서 사용하는 하위 컴포넌트에는 해당 글로벌 스타일이 적용된다.

_app.tsx
정말로 모든 곳에서 사용하고 싶은 글로벌 스타일은 _app.tsx 내에 작성하면 된다.

import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <style jsx global>
        {`
          * {
            font-family: -apple-system;
          }
        `}
      </style>
    </>
  );
}

export default MyApp;

주의할 점은 파일명이 app.tsx가 아니라 _app.tsx 이며, pages 디렉토리 내에 위치해야 한다!

_app.tsx 는 실행시 가장 먼저 확인되기 때문에 최상위 컴포넌트의 역할을 수행한다.

또한, {Component, pageProps} 를 파라미터로 받는데, Component는 서버에 요청한 페이지를, pageProps는 Component의 파라미터를 의미한다.