[React] 컴포넌트 스타일링

note

프로젝트 디렉터리로 들어가서 yarn eject 명령어를 실행하면
node_modules/react-scripts 경로에 내장된 리액트 프로젝트의 환경설정 파일들을 프로젝트 루트 경로로 이동시킨다.

9.1 CSS Module

1. CSS Module은 css를 모듈화하여 사용하는 방식
2. 세 가지 로더를 사용했다
   1) style-loader는 스타일을 불러와 웹 페이지에서 활성화하는 역할
   2) css-loader는 css 파일에서 import와 url(...) 문을 webpack의 require 기능으로 처리하는 기능
   3) postcss-loader는 모든 웹 브라우저에서 입력한 css 구문이 제대로 작동할 수 있도록 자동으로 -webkit, -mos, -ms 접두사를 붙여주는 역할
3. 흠 이상하게 책에서 하라는 데로 해도 안되네, 일단 sass로 넘어가자

9.2 Sass

1. Syntactically awesome style sheets

2. &. 과 &:의 차이를 알아보도록 합시다.

3. 믹스인 사용
   @mixin place-at-center() 부분이 믹스인 정의 부분에 해당한다.
   사용 시에는 @include place-at-center()

4. 변수 사용
   $size : 30px; 과 같이 변수를 선언, 할당할 수 있다.
   사용 시에는 width: $size와 같이 사용한다.

5. 믹스인과 변수를 globally 사용하는 방법
   파일 하나 만들고, import해서 사용하면 된다.

6. Sass의 장점은 스타일 관련 라이브러리를 쉽게 불러와 사용할 수 있다는 점
   라이브러리 설치 : yarn add include-media open-color
   사용 시에는 ~문자를 사용해서 node_moduleㄴ에 접근할 수 있다.
   $breakpoints 변수 : 추후 반응형 디자인을 위한 코드 작성할 때 기준점으로 사용된다.

// /src/App.scss

@import './styles/utils.scss';
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: fixed;
  @include place-at-center();

  &.blue{
    background: blue;
  }

  &:hover{
    background: yellow;
  }

  &:active{
    background: red;
  }

  .box-inside{
    background: pink;
    width: $size;
    height: $size;
    position:fixed;
    @include place-at-center();
  }
}

// /src/styles/utils.sass
@import '~open-color/open-color';
@import '~include-media/dist/include-media';

$breakpoints:(
  small: 376px,
  medium: 768px,
  large: 1024px,
  huge:1200px
);

$size : 30px;
@mixin place-at-center() {
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}