9장 컴포넌트 스타일링

9.1 가장 흔한 방식, 일반 CSS

9.1.1 이름 짓는 규칙

클래스 이름을 컴포넌트 이름-클래스 형태로 지음으로써 중복을 방지
(+ BEM 네이밍)

9.1.2 CSS Selector

.App {
...
}

.App .logo {
...
}

.App header { //header태그 자체 선택
...
}

.App .link {
...
}

 

9.2 Sass 사용하기

• .sass : 중괄호와 세미콜론을 사용하지 않음
• .scss : 기존 CSS문법과 유사

yarn add node-sass

sass-loader 설정 커스터마이징 하기

1. yarn eject로 세부 설정 호출
2. conifig/webpack.config.js 에서 sassRegex 부분 편집

//원본
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ),
  sideEffects: true,
},


// 'sass-loader'부분을 지우고, 뒷부분에 concnat을 통해 커스터마이징된 sass-loader를 삽입. 책에 있는 options 설정 부가 제대로 작동하지 않음.
// 아래와 같이 변경 
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    ).concat({
      loader: require.resolve('sass-loader'),
      options: {
      	prependData: `@import 'utils';`, // 항상 포함시키는 scss추가
        sassOptions: {
          includePaths: [paths.appSrc + '/styles'],
          sassOptions: isEnvProduction && shouldUseSourceMap,
        }
      }
    }),
  sideEffects: true,
},

//출처 : https://velog.io/@madpotato1713/%EB%A6%AC%EC%95%A1%ED%8A%B8-sass-loader-%EC%84%A4%EC%A0%95-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95-%EC%98%A4%EB%A5%98-options-has-an-unknown-property-includePaths.-These-properties-are-valid-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

node_modules에서 라이브러리 불러오기

//open-color : 편리한 색상 팔레트
//include-media : 반응형 디자인을 쉽게 만들어주는 라이브러리
yarn add open-color include-media

//node_modules내의 라이브러리는 물결 푯를 통해 쉽게 호출할 수 있음. 
@import '~include-media/dist/include-media';
@import '~open-color/open-color';

9.3 CSS Module

CSS를 불러와서 사용할 때, [파일 이름]_[클래스_이름]__[해시값] 형태로 자동으로 만들어서 스타일 클래스 이름 중첩을 방지하는 기술 (*.module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용됨.)

//className={styles.[클래스이름]} 형태로 전달. 
//:global .something {...} 처럼 :global을 사용하여 전역적으로 선언한 클래스는 그냥 문자열 삽입 
import React from "react";
import styles from './CSSModule.module.css';

const CSSModule = () => {
    return (
        <div className={styles.wrapper}>
            this is <span className="something">CSS Module</span>
        </div>
    );
};

export default CSSModule;


//CSSModule 컴포넌트에 classnames의 bind함수 적용.
import React from "react";
import classNames from "classnames/bind";
import styles from './CSSModule.module.css';

const cx = classNames.bind(styles);

const CSSModule = () => {
    return (
        <div className={cx('wrapper', 'inverted')}>
            this is <span className="something">CSS Module</span>
        </div>
    );
};

export default CSSModule;

9.3.1 classnames

css클래스를 조건부로 설정할 때 유용한 라이브러리

yarn add classnames

//classnames 간략 사용법
classNames('one', 'two'); // = 'one two'
classNames('one', {two : true}); // = 'one two'
classNames('one', {two : false}); // = 'one'
classNames('one', ['two', 'three']); // = 'one two three'

const myClass = 'hello';
classNames('one', myClass, {myCondition : true}); // = 'one hello myCondition'

9.3.2 Sass와 함께 사용하기

*.module.scss 확장자를 사용하면 Sass를 CSS Module로 사용할 수 있음.

9.3.3 CSS Module이 아닌 파일에서 CSS Module 사용하기

:local을 사용하면 일반 .css/.scss 파일에서도 CSS Module 사용할 수 있음.

9.4 styled-components

자바스크립트 파일 안에 스타일을 선언하는 'CSS-in-JS'라이브러리 중 가장 대중적. 이를 사용하면 자바스크립트 파일 하나에 스타일까지 작성할 수 있다는 장점이 있음.

신택싱 하이라이팅이 제대로 이루어지지 않음. 플러그인 추가 설치 필요
ex > VS Code : vscode-styled-components, intellij : styled components & styled jsx

9.4.1 Tagged 템플릿 리터럴

스타일을 작성할 때 사용한 문법을 Tagged 템플릿 리터럴이라고 함. 이를 사용하면 템플릿 안에 자바스크립트 객체나 함수를 전달할 때 온전히 추출할 수 있음. (<-> 일반 템플릿 리터럴)
styled-components는 이런 속성을 사용하여 props를 스타일 쪽에서 쉽게 조회할 수 있도록 해줌.

9.4.2 스타일링 된 엘리먼트 만들기

import styled from 'styled-components';

const MyComponent = styled.div`
	font-size: 2rem;
`;

//태그의 타입을 styled 함수의 인자로 전달
const MyInput = styled('input')`
	background : gray;
`

//컴포넌트 형식의 값을 넣기
const StyledLink = styled(Link)`
	color : blue;
`

9.4.3 스타일에서 props 조회하기

const Box = styled.div`
    background : ${props => props.color || 'blue'}; // props로 값 전달 가능
    padding : 1rem;
    display : flex;
`;

//in JSX
<Box color='Black'>...</Box>

9.4.4 props에 따른 조건부 스타일링

import React from "react";
import styled, {css} from "styled-components";

const Button = styled.div`
    background : white;
    color : black;
    border-radius : 4px;
    ... 
    ${props => 
    	props.inverted && 
        css` //조건부 스타일링을 할 때 신택스 하이라이팅이 필요하거나, props전달이 필요하면 반드시 CSS로 감싸줘야함.
        background : none;
        border : 2px solid gray;
        `
    }
   `;

//in JSX
<Button>안녕하세요</Button>
<Button inverted={true}>테두리만</Button>