[Emotion] CSS in JS, Emotion에서 조건부 스타일 적용하기

스톱워치를 무한 개량하던 중.. 문득 수강신청할 때 애용했던 네이비즘의 배경색 변경이 갑자기 생각났습니다.

스톱워치가 현재 가리키는 시간(nowTime)에 따라 배경색이 변하도록 구현하면 좋겠다고 생각이 들었죠.

그런데 조건부 CSS를 어떻게 적용해야 할 지 잘 모르겠는겁니다.. (안그래도 Emotion도 처음인데 ;;)

 

아무튼 앞으로 작성할 내용은 정말 간단한 방법으로 조건부 CSS를 적용하는 방법이 되겠습니다!

 

목차

---

0. Emotion의 기본 사용법

Styled-Component을 알고 있다면 그것과 유사하게 사용할 수 있습니다. (CSS in JS의 대부분이 비슷한 사용법을 갖고있더라구요!!)

 

변수를 하나 선언하고 그 안에 템플릿리터럴을 이용해서 CSS 내용을 변수에 넣어둡니다.

이제 해당 스타일을 적용할 부분에 css={변수명} 을 적으면 끝이죠!! 매우 간단합니다.

 

사실 위에서 설명한 내용은 정말로 단순하게 말한 것이고, '@jsxImportSource를 상단에 넣어야 한다~' 같은 내용은 지금 설명하기엔 너무 길어질 것 같으니 공식 문서를 참고하세요!

 

Emotion - Install

 

HTML부분

 

CSS in JS 부분

 

---

1. 조건부 스타일 적용 with ?

사용법은 간단하게 알았으니 바로 조건부 스타일 적용을 해 봅시다!!

 

처음에는 nowTime값에 따라 class를 다르게 줘서 적용하는 방법을 사용할까도 생각했습니다.

하지만 그걸 컴포넌트 내에서 처리하기에는 뭔가 복잡하고 지저분해질 것 같다는 생각이 들었죠.

그래서 CSS에게 조건부 연산의 책임을 넘겨버렸습니다!

 

 

먼저 CSS를 담은 변수에 props로 nowTime값을 전달했습니다.

props가 없는 일반적인 경우와 다르게 화살표 함수를 사용하듯이 props를 전달합니다.

 

const watchContainer = css``; // 기존방식

const totalContainer = (props) => css``; // props를 전달하는 방식

 

그리고 HTML에서도 정말 함수를 사용하듯이 ()안에 요소를 담아서 전달합니다.

{}안에 필요한 요소들을 모두 담아서 넘겨줍시다.

 

<div css={totalContainer({ nowTime })}></div>

 

이제 전달한 요소들을 사용하고 싶다면 props에서 원하는 요소만 뽑아서 사용하면 되겠죠?

저는 nowTime을 넣어줬기 때문에 props.nowTime으로 해당 요소에 접근할 수 있습니다.

이렇게 props를 사용하기 위해서는 ${}안에서 사용해야 한다는 것을 잊으면 안됩니다!

 

그렇다면 조건부 적용은 어떻게 하느냐!!! 바로 삼항연산자를 사용하면 됩니다.

삼항 연산자를 연달아서 나열하면 아주 쉽고 빠르게 조건문을 완성할 수 있는 것이죠. (하나만 되는게 아니었습니다..)

이것은 단순히 JS에서만 적용되는 것이 아니라 다른 언어에서도 사용할 수 있다고 합니다. (대표적으로 C++, Java)

 

삼항 조건 연산자 - JavaScript | MDN

 

const totalContainer = (props) => css`
  padding: 2rem;
  background-color: ${props.nowTime === 3
    ? "#ffd3d3"
    : props.nowTime === 2
    ? "#ff9b9b"
    : props.nowTime === 1
    ? "#ff5e5e"
    : "white"};
`;

 

겨우.. 이거 하나 찾으려고 꽤 오랜 시간을 버렸지만, 결과물을 보니 꽤 만족스러웠습니다 ㅎㅎ