[React] CSS에서 전역변수 사용하기

01. 문제 상황

리액트 프로젝트의 규모가 커져서 컴포넌트가 많아지고, 해당 컴포넌트가 사용하는 css파일도 많아질 경우 css의 속성을 관리하는것은 여간 귀찮은 일이된다.
그래서 리엑트에서 CSS파일에서도 전역변수를 사용할 수 있는 방법을 찾아보고자 한다.

02. 사용 방법

1. scss 설치

개발자들이 들으면 발작하는 말 중 하나가 이것이다.
제가 사용하는 언어는 HTML, CSS에요! ^^...
CSS는 언어가 아니라 마크업 문서이다. 고로 CSS에는 변수 따위가 존재하지 않는다.
이를 해결하기 위해 우리는 SCSS를 사용할 것이다. 먼저 아래 명령어로 라이브러리를 설치하자.

$npm i sass

SASS는 CSS에서 변수를 사용할 수 있게 해주는 라이브러리다.
변수 사용 이외에도 다양한 기능들도 있는 것 같은데 우선은 넘어가자.

2. scss 형식으로 Global하게 관리될 SCSS 파일 생성

다음으로 전역변수를 정의해둘 SCSS 파일을 만들자.
이때 해당 파일은, 이후의 SCSS 파일에서 참조되기 때문에 다른 컴포넌트들이 접근하기 용이한 위치에 만드는 것이 좋다.
나는 프로젝트 최상단에 위치시켰다.

Global.scss

$custom_red: red;
$custom_black: #222222;

scss 파일에서 변수 이름 앞에는 $를 붙여야 한다.

3. 컴포넌트 js 파일 생성, 해당 컴포넌트의 스타일 css 파일 생성

다음으로 전역변수를 테스트해보기 위해, 컴포넌트와 스타일을 하나 만들어보자.
참고로 나는 css 모튤 형태로 만들었다.
편한 형태로 만들자

* 컴포넌트이름.js*

import css from './LoginPage.module.scss'

function LoginPage(){
    return <div id={css.aaa}>
        scss 테스트입니다.
    </div>
}

export default LoginPage

컴포넌트 이름.scss

@import "./../Global.scss";

div{
    color: $custom_red;
    background-color: $custom_black;
}

여기서 scss 파일은 앞에서 정의한 Global.scss 파일을 임포트 해와야 한다.
impost 할 때는 @를 붙이면 된다.
이후 앞에서 정의해둔 변수를 사용하면 된다.

03. 실행결과

아주 잘된다.