[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 33회차 미션 - 31강 Sass

리액트에서의 Sass 설치 및 초기 셋팅

css preprocessor이며 Syntactically Awesome StyleSheets 의 약자인 Sass는 Sass 가이드라인을 참고하면 좋다.
일단 Sass를 사용하면 두가지 확장자를 사용할 수 있는데 .sass와 .scss이다. .sass가 먼저 나왔는데 문법이 너무 축약적이라 생소하기도 하고 잘 안쓰여서 보완하는 개념으로 .scss가 나왔다고 한다. 우리가 배우는 이 튜토리얼에서는 .scss로 사용할 것이다. 그 이유는 .scss가 더 많이 사용되고 있기 때문이다.

node-sass 설치

그럼 먼저 새로운 리액트 앱을 만들고 node-sass를 설치해준다. 리액트 안에서 Sass를 사용할 수 있게 해주는 것이다.

npx create-react-app styling-with-sass
yarn add node-sass

Settings

그리고 우리가 만든 리액트폴더 안에 components라는 폴더를 하나 더 생성하고, 그 안에 Button.js 하나를 추가하자. 그리고 이전에 만들었던 스니펫 fc를 활용하여 함수형 컴포넌트를 생성해주고 그안에 버튼을 만든다.

src/component/Button.js

import React from "react";
import "./Button.scss";

function Button({ children }) {
  return <button className="Button">{children}</button>;
}

export default Button;

그리고 Button.scss파일도 만들어보자.

src/component/Button.scss

$blue: #228be6; //주석!
.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  outline: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  background: $blue;
  transition: 0.2s all;
  &:hover {
    //&은 자신을 말함.
    background: lighten($blue, 10%); //lighten 함수 생성
    box-shadow: 2px 2px 2px rgba($color: #000000, $alpha: 0.2);
    transition: 0.2s all;
  }
  &:active {
    background: darken($blue, 10%); //darken 함수 생성
    box-shadow: inset 2px 2px 5px rgba($color: #000000, $alpha: 0.1);
  }
}

src/App.js

위와 같이 스타일링을 완성했으면 이제 App.js에 Button.js를 연결하고 확인해보자.

import React from "react";
import Button from "./components/Button";
import "./App.scss";

function App() {
  return (
    <div className="App">
      <div className="buttons">
        <Button>Button</Button>
      </div>
    </div>
  );
}

export default App;

이번엔 전체적으로 레이아웃을 잡을건데 이건 App.scss를 만들어서 반영해보자.

src/App.scss

.App {
  width: 512px;
  margin: 0 auto;
  border: 1px solid #000;
  padding: 1rem;
}

Sass로 버튼 size props설정

위에 만든 버튼에 다양한 옵션을 주는 방법을 알아보자. 먼저 구현할 기능은 버튼의 다양한 사이즈를 설정할 수 있도록 해주는 것이다.

Button.js

import React from "react";
import "./Button.scss";

// size: large, medium, small
function Button({ children, size }) {
  return <button className={["Button", size].join(" ")}>{children}</button>;
}

export default Button;

classnames 설치

버튼에 대한 여러가지 설정을 받아와 줄 것이기때문에 classnames 라이브러리를 추가로 설치해보자.

yarn add classnames

위의 그림처럼 classNames는 조건을 통해 클래스명을 불러오고 그에 따른 스타일을 설정할 수 있는 라이브러리이다. 컴포넌트 스타일링을 더욱 효율적으로 할 수 있게 해줄 것이다. classname을 설치했으면 아래와 같이 임폴트하고 기본값(defaultProps)을 설정해준다.

import React from "react";
import classNames from "classname"; //1. classname 임폴트하기
import "./Button.scss";

// size: large, medium, small
function Button({ children, size = "medium" }) {
  //2. default 설정방법1
  return (
    <button
      //3. default설정방법2
      className={classNames("Button", size || "medium")}
    >
      {" "}
      {children}
    </button>
  );
}

Button.defaultProps = {
  //4. defualt설정방법3 -> 가장 정석임. redux개발자에서도 볼 수 있음.
  size: "medium",
};
export default Button;

default 설정방법은 위의 3가지 중 하나만 하면 된다. 제일 마지막에 쓴 방법 ‘Button.defaultProps’가 제일 정석이고, redux 개발자 도구에서도 볼 수 있는 방법이라 저것을 선호한다고 한다.
자 이제 다시 Button.scss로 돌아와서 버튼 크기별 css를 만들어줘보자.

Button.scss

$blue: #228be6; //주석!
.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  outline: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  background: $blue;
  transition: 0.2s all;
  &.large {
    height: 3rem;
    font-size: 1.25rem;
  }
  &.medium {
    height: 2.25rem;
    font-size: 1rem;
  }
  &.small {
    height: 1.75rem;
    font-size: 0.875rem;
  }
  &:hover {
    //&은 자신을 말함.
    //background: lighten($blue, 10%); //lighten 함수 생성
    box-shadow: 2px 2px 2px rgba($color: #000000, $alpha: 0.2);
    transition: 0.2s all;
  }
  &:active {
    //background: darken($blue, 10%); //darken 함수 생성
    box-shadow: inset 2px 2px 5px rgba($color: #000000, $alpha: 0.1);
  }
  & + & {
    //Button뒤에 Button이 올때만.
    margin-left: 1rem;
  }
}

다 만들고나서 이제 App으로 돌아가서 버튼을 여러개 넣어주고 size props를 설정해보자.

App.js

import React from "react";
import Button from "./components/Button";
import "./App.scss";

function App() {
  return (
    <div className="App">
      <div className="buttons">
        <Button size="large">Button</Button>
        <Button>Button</Button>
        <Button size="small">Button</Button>
      </div>
    </div>
  );
}

export default App;

잘 나오는 것을 볼 수 있다.
오늘은 여기까지..
시청 영상 31강 01~03까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp