01.11 리액트 컴포넌트 CSS 적용 ( CSS Module, Sass, styled-components )
React.js 01.11. 컴포넌트 CSS 적용 ( CSS Module, Sass, styled-components ) CSS Module : 모듈화된 CSS로 CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프를 지역적으로 제한하는 방법이다. Sass : CSS 전처리기 중 하나로, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성하는 방식이다. CSS Module 처럼 사용하는 방법도 있다. styled-components : JS 코드 내부에서 스타일을 정의한다. 01.11.1. CSS Module CSS Module 은 CSS를 모듈화하여 사용하는 방식으로 CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프 를 지역적 으로 제한한다. 모듈화된 CSS를 webpack으로 불러오면 사용자가 정의한 클래스 네임과 고유화된 클래스네임으로 구성된 객체를 반환한다. { box : 'src-App__box--mjrNr' } // 클래스 적용할 때는 아래와 같이 사용한다. className = {styles.box} 새로운 프로젝트를 생성한 후 CSS Module을 활성화한다. $ create-react-app study-css $ cd study-css $ yarn eject config/webpack.config.js 파일의 css-loader 설정 부분을 확인한다. const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ isEnvDevelopment && require.resolve( ' style-loader ' ), isEnvProduction && { loader : MiniCssExtractPlugin.loader, ...