module.css 클래스네임을 state로 바꾸기

[홍승진]

선생님 잦은 질문 죄송합니다. 혼자 해보려고 반나절 매달렸는데 안되서 질문드려요
페이지 로딩 되었을 때 <div></div>의 width가 바뀌는 애니메이션을 해보려고 합니다.
쌩자바스크립트로 할 수도 있고
useRef로 지정된 요소를 컨트롤 하는 방법도 있겠지만
수업에서 알려주신 useEffect와 state를 활용하는 방법이 효율적일 것 같아 해보려는데 잘 안됩니다.
const [active, setActive] = useState(""); 라는 state를 만들고 
className={기존 클래스 + active} active라는 변수를 setActive("active")로 바꿔주는 방식으로요
문제는 module.css를 사용하고 있다는 건데 빽틱도 써보고 styles.active도 넣어보고 여러가지 다 해봤는데
최종 컴파일되었을 때 "바꿀css네임.active" 이렇게는 도저히 안나오네요

Banner.js파일

import React, { useEffect, useState } from "react";
import styles from "./Banner.module.css";
    const Banner = () => {
        const [active, setActive] =useState("");
        
        useEffect(()=>{
             setActive("styles.active");
    });
        return (
              <>
                   <div className={styles.banner_left__bg + " " + active }></div>
              </>
        )
}

Banner.module.css 파일

.banner_left__bg {
width: 0%;
height: 100%;
transition: width .5s;
}

.banner_left__bg.active {
width: 100%;
}

[codingapple]

이상한것끼리 +로 합치고 있는 것 같은데요 
className={'banner_left__bg ' + state변수} 합시다

[홍승진]

선생님 알려주신 css 오염방지 방법중에 module.css를적용한 상황인데요.
import styles from "./Banner.module.css"; 로 불러왔기 때문에
답변 해주신 것처럼 하면 스타일이 적용되지 않습니다.
module.css를 포기하라는 말씀이신가요?

[codingapple]

삼항연산자쓰면 될듯요 active라는 state를 true/false같은걸로 바꾸고
active ? styles.active : '' 합시다

[글쓴이]

글