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