[CSS module] REACT 부모 컴포넌트에서 props로 className 전달해주기

 

문제발생 : 

지도를 그리기 위해 카카오맵 open API를 활용하던 중 

크기가 다른 두 개의 지도를 한 페이지에 그리는 기능을 작성하였으나, 

props로 전달받은 classN이 CSS module에 제대로 작동하지 않았다. 

 

 

Contents.jsx파일

import Map from "./Map";
import Weather from "./Weather";

import classes from "./Contents.module.css";

const Container = () => {
  return (
    <>
      <article className={classes.contents}>
        <Weather />
        <Map mapId="map1" classN="map1" lev="7" />
      </article>
      <Map mapId="map2" classN="map2" lev="10" />
    </>
  );
};
export default Container;

 

 

Map.jsx파일

 

import classes from "./Map.module.css";


const Map = ({ mapId, classN, lev }) => {
//중간 코드 생략	
  return <div id={mapId} className={`${classes[classN]}`}></div>;
};
export default Map;

 

props로 전달받은 class명을 위와 같이 적용하여 해결하였다.