2021-04-12 :: 컴포넌트 스타일링

이 장에서 배워볼 스타일링 방식은 다음과 같다.

• 일반 CSS: 컴포넌트를 스타일링 하는 가장 기본적인 방식
• Sass: 자주 사용되는 CSS전처리기 중 하나로 확장된 CSS문법을 사용하여 CSS문법을 더욱 쉽게 작성할 수 있다.
• CSS Module: 스타일을 작성할 때 CSS클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션이다.
• styled-component: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다.

9.1 일반 CSS

CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. 이를 위해서는 이름을 지을 때 특별한 규칙을 사용하거나 CSS Selector를 활용하면 된다.

9.1.1 이름 짓는 규칙

create react-app으로 자동 생성된 App.css를 읽어 보면 클래스 이름이 컴포넌트 이름-클래스 형태로 지어져 있다(예: App-header). 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지할 수 있다. 비슷한 방식으로 BEM 네이밍이라는 방식도 있다. BEM 네이밍은 CSS 방법론 중 하나로, 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방법이다(예: card_title-primary).

9.1.2 CSS Selector

CSS Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. 예를들어 .App 안에 들어 있는 .logo에 스타일을 적용하고 싶다면 다음과 같이 작성하면 된다.

.App .logo {
	animation: App-logo-spin infifnite 20s linear;
    height: 40vmin;
}

이러한 방식을 사용하여 기존 App.css와 App.js의 CSS 클래스 부분을 다시 작성해보겠다.

.App {
  text-align: center;
}

.App .logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App .logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App a {
  color: #61dafb;
}

이런 식으로 컴포넌트의 최상위 html 요소에는 컴포넌트의 이름으로 클래스 이름을 짓고(.App), 그 내부에서는 소문자를 입력하거나(.logo), header 같은 태그를 사용하여 클래스 이름이 불필요한 경우에는 아예 생략할 수도 있다.

9.2 Sass 사용하기

Sass(Syntactically Awsome Style Sheets)는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해 준다.

create-react-app의 v2부터는 별도의 추가 설정 없이 바로 Sass를 사용할 수 있다. Sass는 두 가지 확장자 .scss와 .sass를 지원한다. 두 문법의 차이를 다음 예시를 통해 확인해 보자.

.sass

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
    font: 100% $font-stack
    color: $primary-color

.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
	font: 100% $font-stack;
    color: $primary-color;
}

주요 차이점을 살펴보면, .sass 확장자는 중괄호와 세미콜론을 사용하지 않는다. 반면 .scss 확장자는 기존 CSS를 작성하는 방식과 비교해 문법이 크게 다르지 않다.

이번에는 새 컴포넌트에 직접 Sass를 적용시켜 보겠다. 우선 node-sass라는 라이브러리를 설치하자. 이 라이브러리는 Sass를 CSS로 변환해 준다.

   $ yarn add node-sass

설치가 완료되면 src 디렉터리에 다음과 같이 SassComponent,scss 파일을 작성해 보자.

//변수 사용하기
$red: #fa5252;
$orange: #fd7e14;

//믹스인 만들기(재사용되는 스타일 블록을 함수처럼 사용할 수 있음)
@mixin square($size) {
   $calculated: 32px * $size;
   width: $calculated;
   height: $calculated;
}

.SassComponent {
   display: flex;
   .box { //일반 CSS에서는 .SassComponent .box와 마찬가지
      background: red;
      cursor: pointer;
      transition: all 0.3s ease-in;
      &.red { //red class가 box와 함께 사용되었을 때
         background: red;
         @include square(1);
      }   
      &.orange{
         background: orange;
         @include square(2);
      }
      &.yellow{
         background: yellow;
         @include square(3);
      }   
      &.green{
         background: green;
         @include square(4);
      }
      &.blue{
         background: blue;
         @include square(5);
      }
      &:hover { //.box에 마우스를 올렸을 때
         background: black;
      }
   }
}