[SCSS] module.scss와 classnames 라이브러리 관련 이슈

문제상황

classnames 라이브러리를 활용하여 동적인 클래스 명을 부여해서 컴포넌트 마다 다른 폰트 컬러를 적용하려고 하니 css먹지 않았다. 이유를 알 수 없어서 오타가 난건지 확인을 여러번 했고 디버깅도 했는데 원인을 찾을 수가 없었다.(당연하다 CSS는 디버깅이 어렵다.) 컴파일 순서때문인지 혹은 값을 내려주는 컴포넌트에서 변수명을 틀린 것인지 전부 다 확인해봤으나 문제를 찾을 수가 없었다. 🤯

원인

지금은 해결해서 알게된 사실이지만 개발자 도구에서 내가 classNames함수(classnames 라이브러리 제공 함수)를 통해 부여한 동적인 클래스 값이 해싱되지 않았다면 지금 해당 컴포넌트의 모듈 scss가 아니라 단순 css 클래스명이 부여된 것이라 CSS가 인식이 안된 것 같다. 
 
문제였던 코드

// listItem.jsx

export default function ListItem({
  category,
  score,
  icon,
  bgColor,
  fontColor,
}) {
  const backgroundColor = bgColor || "#fff";
  const categoryClassName = classNames(styles["item-topic"], fontColor);
  // fontColor 는 string 값이다. e.g.) "red"

  return (
    <div className={styles["item-container"]} style={{ backgroundColor }}>
      <div className={categoryClassName}>
        <img src={icon} alt={category} />
        {category}
      </div>
      <div className={styles["item-score"]}>
        <span>{score}</span>&nbsp; / 100
      </div>
    </div>
  );
}

해결

해결 코드 

import React from "react";
import styles from "./ListItem.module.scss";
import classNames from "classnames";

export default function ListItem({
  category,
  score,
  icon,
  bgColor,
  fontColor,
}) {
  const backgroundColor = bgColor || "#fff";
  const categoryClassName = classNames(styles["item-topic"], {
    [styles.red]: fontColor === "red",
    [styles.orange]: fontColor === "orange",
    [styles.green]: fontColor === "green",
    [styles.blue]: fontColor === "blue",
  });

  return (
    <div className={styles["item-container"]} style={{ backgroundColor }}>
      <div className={categoryClassName}>
        <img src={icon} alt={category} />
        {category}
      </div>
      <div className={styles["item-score"]}>
        <span>{score}</span>&nbsp; / 100
      </div>
    </div>
  );
}

 
결론적으로 classnames 라이브러리 사용법이 미숙했던 것과 module SCSS 의 특성에 대해서 제대로 파악하지 못했던 것이 문제였던 거 같다. 그냥 함수에 값만 넘겨주면 알아서 모듈 scss의 클래스명을 인식하는 줄 알았는데 그게 아니라 내가 불러온 scss 모듈 객체를 넘겨줘야 했다.