Nextjs 13 CSS in JS 와 CSS Module 사용하기

next가 때문에 ssr이 핫해진건지 ssr 때문에 next가 핫해진건지

여튼 next 와 ssr이 핫해져서 next 를 사용해보기로 했다.

 

가장 먼저 문제점을 발견했는데 스타일에서 ssr를 적용하면 cra 할때 사용하던 styeld-compoent가 깨진다는 단점이 있었다.

 

정확히 말하면 깨지는게 아니라 스타일 적용이 늦었다.

 

네트워크 탭에서 login.html 을 받아올때 적용 된게 아니라

밑에 부분에 page.js 가 모두 로드되고나서야 스타일이 적용됬다.

page.html 만 불러오고나서 (page.js)를 불러오기 전

page.js 를 불러오고 나서

 

nextjs 13 버전에서 app 디렉토리에서 'use client' 부분에서 이 문제가 드러났다.

 

use client는 내용이 많아서 따로 정리를 해야할거같으니 여기서는 간단히 말해서 클라이언트 구성요소를 사용 할때는 저 문구를 넣어줘야한다는 것

 

예를들어 onClick onChange, web api , react hooks, 외부 라이브러리 등이 있는데

클라이언트 구성이라 하면.. 그냥 간단히 말해서 페이지가 로드되고나서 동작하는 것들에 대해서라고 생각하면 될 것 같다.

 

처음에 레이아웃들을 만들어서 Root Laytout 에 감싸줬는데

useclient 에 관한 에러가 발생했고 하위 컴포넌트들에 대해서 useclient 를 다 선언해줬음에도 사라지지 않았다.

그래서 차근차근 디버깅하듯 원인을 찾아보니 styled-compoents 가 문제였다.

 

nextjs 13 css in js 부분에 styled-compoennt 에 대한 설명과 사용하기위한 설정방법이 있다.

https://beta.nextjs.org/docs/styling/css-in-js#styled-components

Styling: CSS-in-JS | Next.js

하지만 nextjs 13은 마지막 문단과 같이 css 모듈과 tailwind 를 사용하는 것이 좋다고 한다.

 

css in js 란?

js 로 css 를 제어하여 스타일링 해주는 방법이다.

styled-components 와 emotion 은 대표적인 css in js 이다.

 

css in js 는 runtime css in js 와 zero-runtime 으로 2가지로 구분 된다.

 

runtime css in js 의 장점은

변수를 활용하여 동적인 스타일링이 아주 쉽게 가능하다

컴포넌트들을 쉽게 스타일링할 수 있다

컴포넌트 내부에서만 스코프를 가지기 때문에 의도하지않는 이상 오버라이딩이 되지않는다

css 도 컴파일을 거치기 때문에 오류를 발견할 수 있다.

 

단점으로는

이것도 어찌됫든 js 라서 번들량을 늘어난다.

js 사용이 되지않는다면 스타일링도 되지 않는다.

전통적인 css 는 브라우저가 렌더링시 css 를 해석하여 적용하지만 js 실행 돔을 만들고 스타일링이 되기 때문에 성능을 저하시킨다.

 

zero-runtime css in js 는 런타임이 없는 css in js 이다.

동작원리는 각 라이브러리마다 다른 것 같다.

 

css in js 의 동작원리를 설명 해주신 좋은 글이 있다.

https://so-so.dev/web/css-in-js-whats-the-defference/

CSS-in-JS, 무엇이 다른가요?

 

zero-runtime css in js 는 tailwind css 와 잘 모르실만한 스티치 css 등등 있는데 동적인 스타일링이 사실은 불가능하다.

스티치 css

테일윈드 css

 

나는!

 

css 를 어떤걸 사용해볼까 조사하던 중에 공식홈에서 기본적으로 나와있는 css 모듈을 사용하기로 했다.

css 모듈은 css 를 모듈화해서 사용하는 방법인데 그렇기 때문에 클래스가 중복되지 않는다.

 

styled-component 의 theme 처럼 스타일들을 정의해두고 사용할수 있는데

 

theme 같은 파일을 만들고 @value 변수명 : 스타일; 을 정의해두면

사용하고 싶은 곳에서 파일을 불러와서 사용하면 된다.

재밌는 부분은 프론트 일을 하면서 css 파일을 로드되는걸 본적이... 있던가 싶을 정도로 반가웠다.

 

결론은 ssr 의 유행이 불면서 점점 예전의 업그레이드 된 오리지날 기술들이 더 각광 받는 것 같다.??