Next.js 고유의 CSS : Styled jsx

Styled jsx

Styled jsx는 Next.js 고유의 CSS 사용법이다.

 

.modue.css 보다 더 간단하다.(module.css도 사실 엄청 간단하다.)

 

className을 무작위 알파벳으로 만들어주기 때문에, class 이름짓는 걱정을 하지 않아도 된다.  => CSS 반영되는 범위가 현재 컴포넌트의 스코프에 한정된다. => 하위 컴포넌트로 CSS속성이 전달되는 것을 걱정하지 않아도 된다.

 

아래 코드의 리턴문을 보면 <style jsx>라는 태그가 있다.

import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  const router = useRouter();
  console.log(router);
  
  return (
    <nav>
      <span>안녕하세요</span>
      {/* 아래와 같이 styled jsx를 사용할 수 있다 .  */}
      <style jsx>{`
        nav {
          background: tomato;
        }
      `}</style>
    </nav>
  );
}

nav태그의 배경색이 tomato 색으로 변경되었다.

 

부모요소의 css에도 영향을 받지 않는다. 

html 소스코드를 보면 class가 무작위 알파벳들로 만들어져 있다.

때문에 개발자는 중복걱정을 하지 않아도 된다.

 

한번 부모요소에서도 styled jsx 태그를 이용하여 nav태그의 배경색을 blue로 변경해보자.

..(생략)..
return (
    <div>
      <style jsx>{`
        nav {
          background: blue;
        }
      `}</style>
      {/* 배경색이 토마토색으로 설정된 NavBar를 하위 컴포넌트로 갖고 있다.*/}
      <NavBar />

      <h1>Hello {counter}</h1>
      <button onClick={() => setCounter(counter + 1)}>+</button>
    </div>
  );

여전히 NavBar의 nav태그는 토마토색 배경을 갖고 있다.

왜냐하면 Next.js에서 중복설정을 피하도록 설계 해두었기 때문이다.

이러한 장점때문에 styled jsx를 사용하면 className때문에 고민하지 않아도 되고, 하위 컴포넌트로 CSS속성이 전달되는 것을 염려하지 않아도 된다.(내가 맘에 드는 부분)

 

굿