17_리액트_CSS Module

className이 겹치지 않게 작성하는 팁 1. 컴포넌트 이름을 고유하게 지정 2. 최상위 엘리먼트의 클래스이름을 컴포넌트 이름과 똑같게 (대문자를 사용) 3. 그 내부에서 셀렉터 사용 CSS Module CSS Module을 이용하면 이름이 겹치는 현상을 완벽하게 방지할 수 있다. 파일명에 .module.css를 붙이면 사용할 수 있다. 이러면 고유한 파일명등의 해시태그등이 붙어서 네임명이 고유화되게 된다. 레거시 프로젝트에 리액트를 도입하거나 CSS클래스 네이밍 규칙을 만들기 귀찮을때 굉장히 유용하다. 간단한 예시를 보자. //CheckBox.js import React from 'react'; function CheckBox( {checked,children , ...rest} ) { return..