react css 모듈 module undefined 나올 때.

안녕하세요 여러분, 크리에이트 메이커 입니다.

 

오늘도 꿀 팁 !

제가 요즘 리액트로 아주 효율적인 IT서비스 비지니스를 제작중이면서 외주작업도 하고 있는데요.

리액트의 아주 좋은 장점, 모듈화죠.

 

모듈화를 하게되면, 진짜 조각조각 떼다 쓸 수 있어서 좋습니다.

 

하지만 중요한건 모듈화를 할 줄 알아야 겠죠?

 

Chat GPT는 잘 모릅니다 참고로..

 

만약 여러분이 이것저것 다 했는데도 test.module.css 를 만들어서

 

import styles from './test.module.css'

이렇게 선언을 했는데도, 

styles 가 undefined 가 나오고 css 적용이 안된다면.. 그건 잘못된 지식을 갖고 있는것입니다.

자바스크립트 리액트에서 저런 문법은 곧잘 사용되고 함수나 참조를 할때 styles.abc 이런형식으로 잘 동작합니다.

 

하지만... module.css 에선느 아닙니다.

함수가 아니거든요.. styles 라는 함수가 정의돼있지 않을겁니다.. 99%

 

그렇기 때문에 저렇게 module.css 를 쓸때에는.. 

import * as styles from './test.module.css'

 

이런식으로 사용해야합니다 !

 

차이점 바로 이사겠죠?

 

그럼 오늘도 즐거운 개발되세욤!!

 

그럼 안녕