[React] Sass[scss] 디자인 적용시키기

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

 

지금까지 React 프로젝트를 보면 ~.css를 통해서 디자인을 적용하였다.

이번엔 Sass 방식을 이용한 CSS인 ~.scss를 적용시켜보도록 하자.

 

Sass[scss]

Sass는 CSS의 복잡한 구조를, 좀 더 효율적으로 작성할 수 있게 도와준다. 변수를 사용한다거나 제어문을 사용한다거나 등등... 함수를 이용함으로써 반복되는 코드를 재사용할 수 있을 뿐만 아니라, 필요한 부분은 변수를 통해 별도로 호출하여 사용할 수 있다.

일단 중요한 건 scss를 직접 만드는 것이 아니라, 어떻게 사용되고 React에선 어떻게 적용시키는지에 대해 초점을 맞추도록 하자.

 

1 단계

React에 sass css를 설정하기 위해 다음의 Library들을 설치해주자.

• node-sass
• open-color
• sass-loader
• classnames

한 번에 설치하기 위해 다음과 같이 console에 입력하자.

 

npm install node-sass open-color sass-loader classnames

 

2 단계

index.css를 Sass방식으로 변환시켜 보자.

우선 index.css의 내용을 모두 지우고 다음과 같이 입력하자.

 

@import '~open-color/open-color';

body {
  // gray - 색상, 1 - 색의 강도
  background: $oc-gray-1;
  // 양옆 side의 빈 여백 정도 + x, y축 에 대한 여백 정도
  margin: 100px;
}

 

@ 는 Sass 방식에서 사용되는 문법이다. 주로 import를 할 때 사용하는데 우리가 아까 설치했던 open-color를 가져오자.

'~' 의 의미는 node_modules의 경로를 default로 잡아주는 해석한다. 따라서 './node_modules/open-color' 와 같이 일일이 경로를 지정할 필요가 없다.

 

이러한 작업을 끝났다면 index.css 파일을 index.scss로 변경하자.

.scss 파일은 곧 Sass 방식의 파일이라 생각하면 된다.

우선 에러가 발생할 텐데, index.js에 들어가 'import './index.css';' 를 'import './index.scss';' 로 변경한다.

 

결과는 배경색이 회색으로 출력될 것이다.

 

2 - 1 단계

그렇다면 이번엔 임의로 scss를 만들어서 Component에 적용시켜보자.

우선 A.scss를 만들어 다음과 같이 코드를 작성하자.

 

.redbox{
    background: red;
    padding: 1rem;
}

.greenbox{
    background: green;
    padding: 1rem;
}

 

App.js에 들어가 우리가 만든 A.scss를 import 하는데 처음으로 import 하는 방식은 다음과 같다.

 

import './A.scss';

 

다음으로 App.js에 함수형 Component를 생성하자.

이름은 Bpp로 설정하여 다음과 같은 코드를 생성하자.

 

함수형 Component 생성하는 단축키는 rsc 이다.
불필요한 부분은 삭제해서 사용하면 된다.

 

const Bpp = () => {
  return (
    <div className={'redbox'}>
      <h1>독수리</h1>
    </div>
  );
}

 

css 속성을 가져올 땐 className을 사용했었다. 똑같이 className을 사용해 우리가 scss에서 만들었던 scss 함수인 redbox를 Scope안의 'Function' 방식으로 적용시켜주자. 결과는 다음과 같다.

 

 

2 - 2 단계

이번엔 아까 설치한 Module인 classnames를 활용하여 Sass를 적용시켜보자.

2-1단계에서 생성했던 함수형 Component 방식으로 Cpp를 생성하자.

다음으로 classnames를 import 시켜줘야 한다. 다음의 문장을 추가해주자.

 

import classNames from 'classnames/bind';

 

사용방법은 단순하다.

classNames의 bind를 이용하여 .scss 파일을 변수에 bind 시킨다.

그리고 Tag 속성인 className에 bind 시킨 변수를 호출하고, 원하는 Tag를 가져와 사용한다.

코드는 다음과 같다.

 

const Cpp = () => {

  const cx = classNames.bind(A);
  return (
    <div className={'redbox'}>
      <h1 className={cx('greenbox')}>고양이</h1>
    </div>
  );

 

결과는 다음과 같다.

 

 

전체 코드

 

App.js

import React, { Component } from 'react';
// sass파일 가져오는 방법 1
import './A.scss';
// sass파일 가져오는 방법 2
import A from './A.scss';
import classNames from 'classnames/bind';
// Sass css 설정하기
// step1.
// Library 설치
// npm install node-sass
// npm install open-color
// npm install sass-loader
// npm install classnames
// ex) npm install node-sass open-color sass-loader classname

// step2
// index.css로 이동해서 변경
class App extends Component {
  render() {
    return (
      <div>
        <Bpp />
        <Cpp />
      </div>
    );
  }
}

// sass파일 호출하여 사용하는법
const Bpp = () => {
  return (
    // Sass를 가져오는 방법 1
    <div className={'redbox'}>
      <h1>독수리</h1>
    </div>
  );
}

// sass를 가져오는 방법 2
const Cpp = () => {

  // A를 binding 시킨다.
  const cx = classNames.bind(A);
  return (
    <div className={'redbox'}>
      <h1 className={cx('greenbox')}>고양이</h1>
    </div>
  );
}

export default App;

 

index.scss

// step 2
// css확장자명을 scss로 변경.
// index.js 에서 확장자명 같이 변경

// Sass import 방식
// ~의 의미는, node_modules의 경로를 ~로 자동으로 인식해서 사용함.
@import '~open-color/open-color';

//배경색 변경
// $는 Sass문법이다.
body {
  // gray - 색상, 1 - 색의 강도
  background: $oc-gray-1;
  // 양옆 side의 빈 여백 정도 + x, y축 에 대한 여백 정도
  margin: 100px;
}

 

A.scss

.redbox{
    background: red;
    padding: 1rem;
}

.greenbox{
    background: green;
    padding: 1rem;
}