[React] 리액트 Emotion 사용 방법

☘️Emotion 이란?

Emotion
CSS 스타일을 JavaScript 코드 안에 작성하는 CSS-in-JS 방식을 사용하여 쉽게 스타일을 관리할 수 있는 라이브러리

자세한 정보를 얻고 싶으면 아래 공식 문서를 참고하면 된다.

[Emotion] 공식 문서

Emotion – Introduction

---

☘️Emotion 사용법

React를 사용하는 사용자에게 권장되는 라이브러리인 @emotion/react 패키지를 사용할 것이다.

1. 라이브러리 설치

npm i @emotion/react

2. 문자형 css() 함수

Emotion에서 제공하는 css() 함수를 사용하는 방법에는 문자형/객체형이 있다.

// 문자형
import { css } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

3. 객체형 css() 함수

객체형과 문자형을 표현하는 CSS 문법이 다르니 유의하면서 참고하길 바란다.

// 객체형
import { css } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css({
      padding: '32px',
      backgroundColor: 'hotpink',
      fontSize: '24px',
      borderRadius: '4px',
      '&:hover': {
        color: color,
      },
    })}
  >
    Hover to change color.
  </div>
)

 

---

☘️Emotion 활용

TypeScript 기반 React에서 Emotion을 사용할 것이다.

1. TypeScript Emotion 적용 오류

⚠️그런데⚠️ Emotion이 적용이 되지 않는 오류가 있어, 구글링 하여 코드 상단에 해당 코드를 작성하여 문제를 해결하였다.

/** @jsxImportSource @emotion/react */

2. 프로젝트 실행

css 문법은 문자형보다 객체형이 더 편하여 객체형을 사용하였으며, 아래 코드처럼 작성하여 React 프로젝트를 실행하면

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

function App() {
  return (
    <div
    css={css({
      padding: '32px',
      backgroundColor: 'hotpink',
      fontSize: '24px',
      borderRadius: '4px',
      '&:hover': {
        color: 'white',
      },
    })}
  >
    Hover to change color.
  </div>
  )
}

export default App;

[왼쪽] hover 전(검은색), [오른쪽] hover 후(흰색)

3. 모듈화

실제 프로젝트를 할 때엔, css 문법을 함께 두지 않기 때문에 따로 컴포넌트로 분리하여 모듈화를 하였다.

디렉토리 구조는 다음과 같이 설정하였다.

디렉토리 구조

css 문법을 css 디렉토리에 있는 emotionTest.tsx에 저장하여 import 한다.

App.tsx

/** @jsxImportSource @emotion/react */
import { emotionTest } from './css/emotionTest'

function App() {
  return (
    <div css={emotionTest}>
      짱잼 티스토리 블로그
    </div>
  )
}

export default App;

emotionTest.tsx에서는 css 문법 내용을 작성한다.
emotionTest.tsx

import { css } from '@emotion/react'

export const emotionTest = css({
    padding: '32px',
    backgroundColor: 'hotpink',
    fontSize: '24px',
    borderRadius: '4px',
    '&:hover': {
    color: 'white',
    },
});

프로젝트를 실행하면 제대로 적용되는 것을 볼 수 있다.

[왼쪽] hover 전(검은색), [오른쪽] hover 후(흰색)

---

☘️마무리 하며...

emotion에 대해 알아보고 컴포넌트를 분리하는 것도 알아보았다👍😀