[React] - 12) Sass로 스타일링 하기

velopert 님의 리액트를 사용하는 기술에서 공부한 내용임을 밝힙니다 😀

Sass

리액트에서 컴포넌트를 스타일링 하는 방법은 다양합니다. 가장 무난하게 일반 css를 이용하는 방법도 있겠습니다만

 

오늘은 Sass를 이용하여 컴포넌트를 스타일링해보도록 하겠습니다.

 

Sass는 기본적으로 create-react-app으로 리액트 프로젝트를 만들 때 자동으로 사용할 수 있게 됩니다.

 

우선 리액트 프로젝트를 만들고, 터미널에서 node-sass를 추가해 줍시다. 이를 설치하면 sass를 자동으로

 

css로 변환하여 줍니다.

 

yarn add node-sass

 

라이브러리가 설치 되면, SassTemplate.scss파일을 만들어 다음과 같이 스타일링 해 봅시다.

.SassComponent {
      .red {
        color: red;
   }
      .blue {
          color: blue;
   }
      .yellow {
          color: yellow;
   }

 

보시다시피 css 파일과 크게 문법이 다르지 않습니다. 이게 많은 라이브러리 중 scss가 많이 사용되는 이유이기도 합니다.

 

한번 SassTemplate.js에 다음과 같이 작성한 뒤 App.js에서 렌더링 해 보세요.

 

import React from 'react';
import './SassTemplate.scss';
const SassTemplate = () => {
    return (
        <div className="SassTemplate">
            <div className="red">빨간색!</div>
            <div className="blue">파란색!</div>
            <div className="yellow">노란색!</div>
        </div>
    );
};

export default TodoTemplate;

 

이렇게 렌더링이 되면 성공입니다! 컴포넌트 스타일링에서도 나름의 계층 구조를 두어, SassTemplate로 묶여진 컴포넌트에 한해서는

 

그 하위의 스타일링이 전부 사용이 가능합니다. 

 

저도 기본 css와 비슷하면서도, 리액트에서는 더 사용하기 간편한 Sass 라이브러리 (요즘은 보통 scss를 사용)를 이용하여

 

프로젝트를 스타일링 해야겠습니다.