Next.js: CSS Modules의 클래스명 조합(clsx, classnames) 최적화 적용기
3초 요약: 이렇게 고치세요 원인: 템플릿 리터럴로 조건부 클래스를 조합하면 삼항 연산자가 중첩되고, 조건이 꺼졌을 때 빈 문자열이나 false 문자열이 그대로 클래스에 섞여 들어감 해결: clsx (또는 classnames )에 객체 문법 {[styles.클래스]: 조건} 을 넘겨 조건이 참일 때만 클래스가 병합되게 함 주의: CSS Module 클래스명은 리터럴 문자열이 아니라 반드시 대괄호로 계산된 속성(computed property) 형태로 넘겨야 함 clsx(styles.button, { [styles.active]: isActive }) ↓ 왜 이런 문제가 생기는지 원리 보기 Next.js 프로젝트에서 컴포넌트 상태에 따라 CSS Modules 클래스를 조건부로 붙이다 보면, 템플릿 리터럴 안에 삼항 연산자가 두세 개만 겹쳐도 코드가 금방 지저분해집니다. 예전에 외주로 맡았던 어드민 대시보드 프로젝트에서 처음엔 그냥 && 단축 패턴으로 조건을 하나씩 욱여넣는 식으로 땜질하다가, 조건이 꺼졌을 때 클래스에 false 라는 문자열이 그대로 찍혀서 스타일이 깨진 걸 보고 나서야 clsx 객체 문법으로 정리하는 패턴을 쓰게 됐습니다. 그 과정에서 정리한 실전 코드와, 처음엔 놓치기 쉬운 함정 몇 가지를 공유합니다. 템플릿 리터럴(Template Literals) 방식의 한계와 고통 상태에 따라 스타일을 다르게 주어야 하는 흔한 예시인 '버튼(Button)' 컴포넌트를 예로 들어보겠습니다. CSS Modules를 연동한 뒤, 템플릿 리터럴로 다중 조건부 스타일을 조합하면 보통 아래와 같이 구현하게 됩니다. // 템플릿 리터럴을 사용한 기존의 조건부 스타일 조합 <button className={`${styles.button} ${isPrimary ? styles.primary ...