module.css 그리고 styled-components

 

Next.js와 TypeScript를 처음 사용하면서 메모장을 간단하게 만들어보자..

하면서 ChatGPT를 따라가다가 생긴 의문점!

• module.css 이거 뭐지
• (gpt 설명 듣고 난 후) 어 그럼 styled-components는..?

 

module.css

.module.css는 CSS Modules 을 사용할 때만 붙이는 거다.

	일반 CSS	CSS 모듈
적용 방식	className="memo-container"	className={styles.memoContainer}
전역/로컬 범위	전역(Global)	로컬(Local)
충돌 가능성	다른 컴포넌트와 클래스명이 겹칠 수 있음	같은 클래스명이 있어도 독립적으로 관리
사용 예시	import "./global.css";	import styles from "./Memo.module.css";

 

-> 각 컴포넌트별로 독립적인 스타일을 유지하고 싶을 때 사용하면 좋다

-> 전역 CSS는 관리가 어렵고 충돌 위험이 커지므로 각 컴포넌트마다 .module.css를 사용해서 관리하는 것이 좋다

-> .css는 body, html, button과 같은 기본 요소 스타일을 지정할 때나 공통 스타일을 관리하고 싶을 때(global.css에서 폰트, 색상 등의 기본레이아웃 정의)쓰면 좋다

 

 

styled-components vs .module.css

	styled-components	.module.css
스타일 적용 방식	JS/TS에서 직접 스타일링	별도의 .module.css 파일에서 스타일 관리
CSS 범위	자동으로 컴포넌트 단위로 캡슐화	로컬 범위로만 적용(또이또이)
동적 스타일	props를 활용한 동적 스타일 적용 가능	기본적으로는 어려움(className으로 제어)
성능	SSR 시 성능 이슈 발생	Next.js 기본 지원 방식으로 성능 최적화
전역 스타일 적용	createGlobalStyle 사용	global.css와 같은 파일을 따로 생성

 

 

Next.js에서 styled-components를 사용하는 게 좋은 상황

• 동적인 스타일 변경(props에 따른 색상 변경 등)이 많을 경우
• CSS-in-JS 스타일링을 선호함
• 디자인 시스템과 함께 사용(ex. styled-components+ThemProvider)

근데 Next.js에서는 SSR 지원을 위한 추가 설정이 필요하다

• "npm install styled-components"
• _document.tsx 파일을 수정하여 SSR 지원 추가

 

Next.js에서 .module.css를 사용하는 게 좋은 상황

• Next.js에서 기본 지원되므로 추가 설정x
• 컴포넌트별로 스타일을 분리하고 싶을 때
• SSR 성능을 고려한다면
• 전통적인 CSS 방식을 사용할 거라면

 

 

 

 

 

그러므로 프로젝트에 따라 다르겠지만...

 

• .module.css(기본 스타일) + styled-components(동적 스타일) + css(기본 스타일)
• styled-components(캡슐화) + css(기본 스타일)

 

이런식으로 사용하면 되지 않을까 싶다.

이건 더 찾아보면서 어떤 식으로 작성하는 게 좋을지 알아봐야겠다.