차크라 UI 쓰는게 좋을까?

카테고리 없음

by 리액트바오 2023. 1. 17. 14:49

회사에서 새로 시작하는 프로젝트에서 chakra ui를 사용하게 될 수 도 있다고 들었다.

아직 확정된 상황은 아닌데 chakra ui에 대해 알아볼 필요가 있기에 나는 프로젝트를 앞두고 차크라 ui에 대해 알아보기로 했다.

먼저 내가 궁금한 부분은

버튼 디자인을 자체적으로 해놓았을 경우, chakra ui를 굳이 사용하지 않아도 되지 않을까? 라는 의문이 든다.

chakra ui를 사용하는 이유는 디자인 해둔 사항이 없기때문에 디자인을 가져다 쓰는것이라고 생각하는데, 또 어떤 이점이 있는지 한번 알아보자.

차크라 UI 란 ?

우선, Chakra UI의 요소는 API를 사용하여 간단하게 사용자 정의하고 테마를 변경할 수 있다.

Chakra UI는 재사용 가능한 사용자 인터페이스 구성 요소를 빠르게 구축할 수 있도록 도와주는 구성 요소 도구 키트다. React 위에 구축되었으며 테마 엔진에 스타일이 지정된 시스템을 사용한다.

Dark모드 호환

대부분의 컴포넌트들이 다크모드가 호환이 되기 때문에 다크모드 구현하기에 수월하다.

또, 다크모드 외에도 업체별 다른 테마를 지정해주고 싶을때 유용하다. 사용 방법은 이러하다.

import { extendTheme } from "@chakra-ui/react"

extendTheme를 import 해준다.

<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

ChakraProvider로 감싸 테마를 적용해준다.

const theme = extendTheme({
  colors: {
    brand: {
      100: "#319796",
      200: "#A3A3A3",
      300: "#CCA269",
      400: "#3D2D00",
      ...
      900: "#7C0811",
    },
  },
})

extendTheme에 적용해준다.

function Usage() {
  return <Box bg="brand.100">Welcome</Box>
}

필요한 스타일을 불러와 사용한다.

Modal 컴포넌트

모달창을 만든다면 주는 효과가 어느정도 정해져있을것이다.

모달 띄우기, 모달 닫기, 모달 뒤 배경 어둡게하기, 모달창이 떠있는동안 다른 영역의 동작을 할 수 없게 하기 등..

일일히 코드를 짜 줘야하는데 차크라ui를 사용하면 이 효과를 차크라에서 구현해준다. 우리는 간단한 코드 한줄(?)로 모달창을 띄울 수 가 있는것이다.

차크라ui에 이 모달창뿐만아니라 다양한 유형과 사이즈별로 모달창이 존재해서 가져다 쓸 수 있다.

차크라 UI 설치

먼저, 차크라 ui를 설치한다.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

npm 또는

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

yarn으로

Chakra UI를 설치했으면 애플리케이션의 루트페이지에서 ChakraProvider를 구성해야한다. 현재 사용하고 있는 프레임워크에 따라 index.jsx, index.tsx 또는 app.jsx파일에 있을 수 있다.

import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'

function App() {
	return (
		<ChakraProvider>
			<App />
		</ChakraProvider>
	)
}