9. 컴포넌트 스타일링

• css : 기본 방식
• Sass : CSS 전처리기.
• CSS Module : CSS 클래스 충돌하지 않도록 고유한 이름 자동 생성
• Styled-components : 스타일을 JS 파일 안에 내장

일반 CSS

• CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것
  • 이름을 지을 때 특별한 규칙을 사용하여 짓는 것
    • 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지할 수 있죠.(예: App-header)
    • 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식 예를 들어 .card__title-primary
  • CSS Selector를 활용하는 것입니다.
    • CSS Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있습니다. .App .logo

Sass

• 복잡한 작업 쉽게, 스타일 코드의 재활용성, 가독성 높여 유지보수 쉽게
• .scss와 .sass가 있지만 css 문법과 비슷한 .scss 사용
• CSS selector 편리하게 사용
  • 클래스{} 안에 클래스 적용하면 동일한 기능.
  • SassComponet 클래스 안에 있는 .box 클래스 사용
• mixin : 재사용되는 스타일 블록을 함수처럼 사용가능
• 여러 파일에서 사용될 수 있는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳에서 쉽게 불러와 사용할 수 있습니다.
• 프로젝트 폴더 구조가 깊어졌다면 그 파일에 접근하기 위해 ../../../ 이런식으로 복잡해진다.
• sass-loader 커스타마이징으로 해결이 가능하다.
• 순서
  1. 먼저 git에 커밋하기
  2. yarn eject -> react-script eject -> y
  3. 생성된 config 폴더에 webpack.config.js파일 -> sassRegex 찾기
  4. 'sass-loader' 지우고 다음 코드 추가

  concat({
          loader: require.resolve('sass-loader'),
          options: {
            sassOptions: {
              includePaths: [paths.appSrc + '/styles'],
            },
            sourceMap: isEnvProduction && shouldUseSourceMap,
            //prependData: `@import 'utils';`,
          },
        }),
  

  1. 서버 재시작
• sass-loader을 커스터마이징 했다면 @import 'utils.scss' 만 적으면 된다.
  • 더 편하게 위의 //prependData: @import 'utils';, 주석을 지우면 알아서 import 해준다.

CSS Module

• CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술입니다.
• CSS Module을 사용하면 클래스 이름을 지을 때 그 고유성에 대해 고민하지 않아도 됩니다.
• 해당 클래스는 우리가 방금 만든 스타일을 직접 불러온 컴포넌트 내부에서만 작동하기 때문입니다.

styled-components

• 컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식입니다.
• 이 방식을 ‘CSS-in-JS’라고 부릅니다.
• 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부릅니다.css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다.

스타일에 props 적용하기

• styled-component를 사용하는 장점 중 하나가 변수에 의해 스타일을 바꿀 수 있다는 점입니다.
• 위 예시를 보면 email이라는 state값에 따라 ExampleWrap에 prop으로 내려준 active라는 값이 true or false로 바뀌게 됩니다.
• styled-component는 내부적으로 props을 받을 수 있고, 그 props에 따라 스타일을 변경할 수 있습니다.

스타일 상속

• const 컴포넌트명 = styled.스타일컴포넌트명스타일 넣기...문법으로 만들어집니다.
• 기존에 있는 스타일컴포넌트를 상속받아 재사용합니다.

Mixin css props

• css props는 자주 쓰는 css 속성을 담는 변수입니다.
• css 변수명 = css스타일... 로 사용합니다.