CSS 적용 with React

보통 styles은 .css를 import 해서 해당 class, id 냐?에 따라 태그 주소를 찍고 중괄호를 해주면된다.

 

하지만, React에서도 똑같다. 하지만, 핵심적인 포인트는 다음과 같습니다.

 

- 중복된 css 클래스명을 방지 할 수 있습니다.

 

- 전력이 아닌, 독립적인 컴포넌트나 테그에 스타일을 줄 수 있다.

 

testStyle.css을 test.tsx에 적용시켜버리면, 전역으로 스타일이 적용이 됨,

 

즉, 밑에 처럼 모든 button에 스타일이 적용됨. 하지만, child, 부모 다음, 첫 번째 자식 등으로 세부적으로 적용할 수 있지만, 

 

길어지고 한 화면에 모듈이나 컴포넌트가 추가되버리면, 유지보수 측면에서 복잡해짚니다.

 

.button { background-color: blue; }

import './CSS/styles1.css' export const Moudule1 = () => { return ( <> 안녕 <button className="button"></button> <button className="button"></button> <button className="button"></button> </> ); };

 

하지만,  .moudule.css를 사용하게 되면, 클래스 네임 충돌을 필할 뿐더러, 독립적인 컴포넌트 스타일 적용 및 각 컴포넌트에서 특정 객체에게도 따로 적용할 수 있습니다. 쉽게...

 

 

위 내용을 보시면, 버튼 전체에 스타일 적용이 아니라, .module.css 의미는 moudule1. 라는  객체를 생성해서 moudulesStyle 인스턴스화 하여 요소와 속성들을 사용하겠다라는 의미이며,

 

위 처럼, moudulesStyle 인스턴스에서 .으로 각 스타일 객체에 접근하여 속성과 값들을 해당 컴포넌트나 태그들에게 스타일을 적용하겠다라고 이해했습니다.