201016_TIL
- React 컴포넌트 스타일링
@@ 오늘은 어제에 이어 컴포넌트 스타일링, CSS 모듈화에 대해서 배웠다. 서적을 보면서 실습해보면서 진행했다. module파일을 작성하고 적용하는 방법과 JS 안에 css 작성을 하는 라이브러리 styled-component에 대해서 배웠다. Tagged Template Literals 문법에 대해서 처음 접하는데, 동적 스타일링을 구성하는데 여러모로 편리하겠다는 생각이 들었다.
CSS 사용 방식
-
webpack css-loader를 이용하여 일반 CSS 를 불러오는 방식
- 클래스 네임이 중복될 가능성이 있어 이를 방지하려고 앞 코드에서는 각 클래스 네임에 컴포넌트 이름을 접두사로 붙여주거나 해야 한다. (컴포넌트에 국한되지 않고 전체 컴포넌트에 반영이 된다)
- BEM Naming 방식을 활용할 수도 있다.
-
컴포넌트 스타일링에서 자주 사용하는 방법
-
Sass (css pre-processor)
자주 사용하는 CSS 전처리기중 하나, 확장된 CSS문법을 사용하여 CSS 코드를 더욱 쉽게 작성
-
sass 를 CSS 로 변환해준다.
-
sass-load 커스터 마이징은 여기 참조
-
yarn eject를 통해 꺼내진 webpack.config.js 에서 sassRegex부분을 아래와 같이 교체하면, 복잡한 상대경로(../../../) 제거하더라도 sass를 불러올 수 있다
{ test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders({ importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap }).concat({ loader: require.resolve('sass-loader'), options: { prependData: "@import 'utils';",//scss파일을 읽어들일 때마다 이 구문을 추가하도록 sassOptions: { includePaths: [paths.appSrc + '/styles'], sourceMap: isEnvProduction && shouldUseSourceMap } } }), sideEffects: true }
-
-
sass 관련 라이브러리를 불러오는 방법
-
-
CSS module
모듈화된 CSS로 CSS클래스를 만들면 자동으로 고유한 클래스 네임 생성, 스코프를 지역적으로 제한해준다
- 자동으로 [파일이름][클래스이름][해쉬값] 형태로 클래스 네임을 자동으로 고유한 값으로 만들어주낟. 스타일 중첩 현상을 방지해준다.
- [파일이름].module.css 와 같이 파일을 저장해야 한다.
- style을 불러오면 하나의 객체를 전달 받는다. 그 안에는 CSSModule에서 사용한 클래스 이름과 해당 이름을 고유화시킨 값이 key-value형태로 들어있다.
- classnames 모듈을 사용하여 classnames/bind 로 엮어서 편리하게 사용할 수 있다. (scss도 마찬가지로 사용가능하며)
module.scss가 아니더라도(일반 css파일에서도) :local 을 사용하면 CSS 모듈을 사용 가능하다.
-
styled-components
JS코드 내부에서 스타일 정의
-
Tagged Template Literals 문법
함수 인자를 파싱하여 넘겨준다.
// styled-components const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `;
자바스크립트 표현을 끊어서 처리하기에 함수가 함수 형태 그대로 배열안에 들어가게 된다. 이에 따라 styled-compoent가 끊어진 값들을 참조해서 스타일을 정상적으로 처리한다
동적 스타일링에 유리
-
출처: 리액트를 다루는 기술, 김민준 저, 2018
-
Author And Source
이 문제에 관하여(201016_TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@oh_ji_0/201016TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)