[React] React와 Vue의 CSS 모듈 사용 차이점

1. 파일 명명 규칙

• React: [name].module.css
• Vue: [name].module.css 또는 <style module> 태그 사용

2. import 방식

• React: import styles from './Header.module.css';
• Vue:

  <style module src="./Header.module.css"></style>

 

3. 클래스 사용 방법

• React: <div className={styles.header}>
• Vue:

  <div :class="$style.header">

 

4. 인라인 스타일 모듈

• React: 지원하지 않음
• Vue:

  <style module>
  .header { /* 스타일 규칙 */ }
  </style>

 

5. 전역 스타일과의 혼용

• React: 별도의 파일로 관리
• Vue: 같은 컴포넌트 파일 내에서 모듈 스타일과 전역 스타일 동시 사용 가능

 

6. 스코프 설정

• React: 자동으로 모든 스타일이 모듈화됨
• Vue: module 속성을 사용하여 명시적으로 스코프 지정

 

7. 동적 클래스 바인딩

• React: JavaScript 객체를 사용하여 조건부 클래스 적용
• Vue: v-bind 디렉티브와 객체 문법을 사용하여 더 간편한 동적 클래스 바인딩 제공