사용교재 : 벨로퍼트와 함께하는 모던 리액트
범위 : 2.1 ~ 2.3
노션 용량문제로 Migration

리액트 컴포넌트 스타일링

2.1 Sass

CSS 전처리기. .scss, .sass 두가지 확장자 지원. 주로 scss 문법을 씀
(sass 는 브라켓이 없다)

• 변수 선언 $
• @mixin : 반복코드되는 코드를 선언해서 재사용 가능
• @include : 선언한 mixin 호출

$blue: #228be6;

@mixin button-color($color) {
  background: $color;
}

.Button.blue {
	@include button-color($blue); 
}

• classnames 라이브러리 : class를 설정하는 것을 도와줌 (cx() 로 축약가능)

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
classNames(['foo', 'bar']); // => 'foo bar'

// 동시에 여러개의 타입으로 받아올 수 도 있습니다.
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// false, null, 0, undefined 는 무시됩니다.
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

2.2 CSS Module

리액트 프로젝트에서 컴포넌트 스타일링을 할 때, CSS 클래스가 중첩되는 것을 방지 가능. .module.css 확장자. scss 도 가능(node-sass필요)

클래스 이름이 고유해짐 → 경로, 이름, 클래스, 해쉬값 등이 사용되기 때문
ex) Box.module.css 의 .Box ⇒ class="_src_Box_module__Box"

리액트 클래스 네이밍 규칙

• 컴포넌트 이름은 다른 컴포넌트와 중복X
• 컴포넌트의 최상단 CSS 클래스는 컴포넌트 이름과 일치
• 컴포넌트 내부에서 보여지는 CSS 클래스는 CSS Selector를 활용

2.3 styled-components

CSS in JS(JS안에 CSS를 작성) 기술의 라이브러리.
Tagged Template Literal 사용 ${ }
대안: emotion, styled-jsx

• 사용법 : styled.태그 로 선언 및 스타일 입력하여 컴포넌트 생성
  → `` 사이에 props, 함수도 넣을 수 있다

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: ${props => props.color || 'black'};
  border-radius: 50%;
  ${props =>
    props.huge &&
    css`
      width: 10rem;
      height: 10rem;
    `}
`;

function App() {
  return <Circle color="red" huge />;
}

• ThemeProvider sass 의 @mixin 같이 미리 선언하면, 하위 styled component에서 활용가능

<ThemeProvider
      theme={{
        palette: {
          blue: '#228be6',
          gray: '#495057',
          pink: '#f06595'
        }
      }}
    >
      <AppBlock>
        <Button color="gray">BUTTON</Button>
      </AppBlock>
    </ThemeProvider>