REACT LIBRARY/CSS Module

CSS Module 사용해보기

리액트 프로젝트를 새로 생성합니다 생성 후 추가적으로 라이브러리를 설치할 필요는 없습니다 내장에 포함되어있고, 명칭만 .module.css 로 생성합니다 $ npm run start src 폴더에 components 폴더 생성 후 CheckBox.js 파일을 만들어줍니다 먼저 컴포넌트 틀을 잡아줍니다 import React from 'react' function CheckBox() { return ( ) } export default CheckBox input을 만들어주고 props로 checked값을 가져옵니다 function CheckBox({ checked }) { return ( ); } 만약에 checked 값이 true 라면 "체크" 라고 보여줍니다 그렇지 않으면 '체크 안됨' 이라고 보여줍니..

CSS Module

리액트에서 컴포넌트 스타일링을 할 때 CSS Module를 사용하면 className 중복을 방지할 수 있습니다 CSS Module를 사용할 땐 .module.css 으로 작성합니다 //Button.module.css .Button { display: inline-flex; align-items: center; justify-content: center; color: white; padding: 2rem; } 이렇게 만들어놓은 박스가 있다고 가정해봅시다 임포트를 해서 불러오는건 맞지만 약간의 방식의 차이가 있습니다 원래대로라면 이런식으로 작성하죠 import "./Button.scss"; 하지만 CSS Module를 불러올 땐 이렇게 작성합니다 import styles form "./Button.modu..