[React] 색상 코드를 공유하고 싶어요

우리는 보통 색상을 적용할 때 위의 사진처럼 색상 코드를 바로 작성할 때가 많다.

그러나 동일한 색상을 여러 컴포넌트에 계속 적용하게 되는 구조로 코드를 짠 뒤에,,

디자이너 : "저희 색상 코드 바꿀게요. A에서 B로 바꿀건데 참고해주세요." 라고 한다면,,?

모든 색상 코드를 다 검색해서 일일히 하나하나씩 바꿔야 하는 불상사가 있다..

완전 끔찍한 일 아닌가,,

그럴 때 사용할 수 있는 게 바로 "theme" 이라는 친구다.

오늘은 theme을 작성하여 정해진 색상을 변수화를 시켜서 한 번에 수정할 수 있는 결과를 봐보자.

1단계 : theme.js 파일 생성

자유롭게 해도 좋지만, Styles 폴더를 생성해서 안에 js 파일을 생성하는 것으로 진행해봤다.

2단계 : 변수 선언

export 할 수 있는 변수를 선언해주고, 그 안에 아래와 같은 형태로 작성해준다.

colors {
  색상 이름 : "색상 코드"
}

3단계 : 변수 사용

그리고 색상 코드를 사용하는 곳에다가 ${theme.colors.색상이름}과 같은 형태로 사용한다.

자, 이렇게 쉽게 색상 코드를 변수화시켜서 사용할 수 있게 된다.

당신은 이제 색상 코드 변수 적용화의 달인!