React 입문자 꼬리표 떼기/Frontend Setup

Emotion 도입하기

SmileRush 2023. 6. 15. 03:26
반응형

emotion 라이브러리 이미지... 구린데?

 

리액트 프로젝트를 하면서 스타일링을 어떻게 할까 늘 고민이 됩니다~
그래서 여러 프로젝트를 해보면서, 최종적으로 정착한 녀석을 소개합니다 ㅎㅎ.
역시 emotion 이모션이 젤 좋은거 같아요~

 

먼저 개발자 경험(DX) 개선을 위해, Theme.d.ts 파일을 작성합니다.

  1. 코드 제안
  2. 자동 완성

기능을 위해 작성하는 것입니다.

 

  • src/styles/Theme.d.ts
declare module '@emotion/react' {
  export interface Theme {
    colors: {
      white: '#ffffff',
      black: '#000000',
      red: '#ff0000',
    },
    backgroundColor: {
      primary: '#ffffff',
      secondary: '#000000',
    },
    fontSizes: {
      xs: '12px',
      sm: '14px',
      md: '16px',
      lg: '18px',
      xl: '20px',
    },
  }
}

테마의 타입을 작성하였습니다. 그러면 이제 타입을 입힌, 실제 애플리케이션에 제공할 테마 코드를 작성해보겠습니다.

 

  • src/styles/emotionTheme.ts
import { Theme } from '@emotion/react'

export const EmotionTheme: Theme = {
  colors: {
    white: '#ffffff',
    black: '#000000',
    red: '#ff0000',
  },
  backgroundColor: {
    primary: '#ffffff',
    secondary: '#000000',
  },
  fontSizes: {
    xs: '12px',
    sm: '14px',
    md: '16px',
    lg: '18px',
    xl: '20px',
  },
}

이렇게 해서, emotion에서 제공하지는 않지만, 내가 styled 키워드를 사용해서 컴포넌트를 제작할 때, 많이 사용할 것 같은 값을 간편하게 입력할 수 있게끔하는 Theme 기능에 대해 알아보았습니다.

이렇게 고생해서 코딩하면? 다음과 같이 개발 시에 편의를 누릴 수가 있다~ 이 말이죠

 

이제 다음 할 일은, 내 애플리케이션의 스타일을 조금 더 커스터마이징 할 수 있는 기능, Global을 사용하는 것입니다.
보통 코드는 다음과 같습니다.

  • src/styles/GlobalStyle.tsx
import { Global, css } from '@emotion/react'
import reset from 'emotion-reset'

export const GlobalStyle = () => (
  <Global
    styles={
      css`
        ${reset}

        html, body, textarea {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
        }

        * {
          box-sizing: border-box;
        }

        a {
          cursor: pointer;
          text-decoration: none;
          transition: .25s;
          color: #000
        }

        ol, ul {
          list-style: none;
        }
      `
    }
  />
)

이렇게 해서 우리는 3개의 파일을 작성했습니다.

  1. Theme.d.ts
  2. EmotionTheme.ts
  3. GlobalStyle.tsx

이 중에서 Theme.d.ts 파일은 EmotionTheme.ts를 위해 작성했던 타입 코드였습니다.
따라서 우리는 EmotionTheme.ts , GlobalStyle.tsx 파일과 코드를 내 애플리케이션에 적용하면 됩니다.

 

더보기

필자는 Next.js를 선호하여 Next.js 프로젝트에서 적용했습니다만,

  • npx create-next-app frontend --ts : frontend 폴더를 생성하며, 폴더 안에Nextjs 프로젝트를 typescript 포맷으로 생성
  • npx create-react-app … : Reactjs 프로젝트 생성
  • npm create vite@latest … : Vitejs 프로젝트 생성
  • …

어떤 프로젝트이든 무관하게,
애플리케이션 최상단에 위 코드들을 적용하면 되겠습니다.

 

필자는 Next.js로 프로젝트를 생성했으므로,
“엔트리 파일(진입 파일)”인 _app.tsx에 아래와 같이 코드를 추가하였습니다.

import type { AppProps } from 'next/app'

// ThemeProvider를 불러오기
import { ThemeProvider } from '@emotion/react'
// GlobalStyle을 불러오기
import { GlobalStyle } from '#/styles/GlobalStyle'
// ThemeProvider에 제공할, 커스터마이징한 Theme를 불러오기
import { EmotionTheme } from '#/styles/EmotionTheme'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={EmotionTheme}>
      <GlobalStyle />
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

이렇게 하면, 우리가 작성한 테마와 글로벌 스타일이 적용된 애플리케이션을 볼 수 있습니다.

- 위 예시는 매우 간단한 예시입니다.
emotion을 typescript 버전으로,
개발자의 편의성과 타입 안정성을 위한 코드를 작성하는 방법에 대해 작성하였습니다.

따라서 원리가 이해되었다면 더 스마트하고, 더욱 멋진 스타일로 코드를 작성해나가시길 바랍니다^-^

반응형