Next.js 13 - Styled JSX

Styled JSX는 Next JS의 고유한 방법이라고 할 수 있는 스타일 적용 방법입니다.

✏️ style 작성 방법

• Return 해주는 jsx 안에서 <style>태그를 작성해 줍니다.
• 태그 안에 jsx를 prop으로 넣어줍니다.
• 태그 사이에 중괄호를 열어주고 백틱 기호를 작성해 줍니다.
• 백틱 기호 안에서 기본 css 내용을 작성해 줍니다.

**아래의 코드는 Counter 파일에 작성되어 있습니다.

return (
    <div>
      <NavBar />
      <h1>counter {counter}</h1>
      <button onClick={() => setCounter((pre) => pre + 1)}>+</button>
   🔥🔥<style jsx>{`
        h1 {
          background-color: tomato;
        }
      `}</style>🔥🔥
    </div>
);

✏️ 클래스명 추가

html 태그로 스타일을 지정해주는 방법 이외에 별도로 클래스명을 추가하여 스타일을 적용해 주고 싶은 경우에는 아래와 같이 className에 작성해 줄 수 있습니다.

아래의 예시 코드는 counter의 숫자가 짝수일경우 텍스트 색상을 노란색으로 바꿔주는 스타일 조건문 입니다.

**아래의 코드는 Counter 파일에 작성되어 있습니다.

return (
    <div>
      <NavBar />
      <h1 className={counter % 2 === 0 ? "active" : ""}>counter {counter}</h1>
      <button onClick={() => setCounter((pre) => pre + 1)}>+</button>
      <style jsx>{`
        h1 {
          background-color: tomato;
        }
        .active {
          color: yellow;
        }
      `}</style>
    </div>
);

✏️ 장점

브라우저에서 html 요소의 클래스명을 확인해 보면 랜덤 생성된 텍스트가 작성되어 있는 것을 볼 수 있습니다. 이는 각 모듈 파일에서 독립되어 있다는 점을 나타냅니다.

다시 말해 위의 예시에서 Counter 파일이 아닌 다른 파일에서 h1 태그를 사용해 새로운 css를 작성하거나 클래스명을 중복해 사용해도 현재 Counter 파일에는 적용되지 않습니다.

또한 클래스명을 생각하거나 css 파일을 import 할 필요가 없고, 개인차가 있겠지만 보기에 좀 더 편하다는 장점이 있습니다.