Chakra UI를 아시나요?

SOPT·2023년 1월 24일

CSS chakra UI 라이브러리

web

목록 보기

5/7

Chakra UI에 대해서

1. Chakra UI 란?

“Chakra UI는 React 애플리케이션을 빌드하는데 필요한 블록을 제공하는 간단하고, 모듈적이며, 접근 가능한 컴포넌트 라이브러리입니다.”

접근성 표준 WAI-ARIA standards를 엄격하게 따른 개발
다크모드 적용이 쉬움
prop-based
다양한 컴포넌트

(Accordion, Alert, AlertDialog, AspectRatioBox, Avatar, Badge, Box, Breadcrumb, Button,Checkbox, CircularProgress, CloseButton, Code, Collapse, ControlBox, Divider, Drawer, Editable, Flex, FormControl, Grid, Heading, Icon, IconButton, Image, Input, Link, List, Menu, Modal, NumberInput, Popover, Progress, PseudoBox, Radio, SimpleGrid, Select, Skeleton, Slider, Spinner, Stat, Stack, Switch, Tabs, Tag, Text, Textarea, Toast, Tooltip 등등……)

유틸리티

(useClipboard : 클립보드로 내용을 복사하는 커스텀 훅,
useDisclosure : Modal, Drawer 등의 Open, Close, Toggle 을 지원하는 커스텀 훅,
useColorMode : 초기 설정 후 매우 간단하게 colorMode를 변경하게 해주는 훅 등등……..)

개발 스택을 정하던 중 차크라ui 말을 꺼낸 팀원의 말을 뒤로 하고 styled-components로 작업을 시작했습니다. 스프린트 형식으로 새로운 라이브러리를 배울 시간이 없을 것이라고 생각했기 때문이죠. 그러다 결국 다음 서비스 개발에서는 차크라ui를 써보기로 합니다.

🐣 : 대충 얘는 어떻게 쓰는 앤데?

🐻 : 얘는.. 밑에다가 스타일을 따로 지정해줄 필요 없어. props로 다 넘겨주면 돼!

🐣 : ..?

처음 코드를 봤을 때는 이해가 가지 않았습니다. Box 컴포넌트..? Flex..? 따로 선언해준 컴포넌트가 없지만 위에서 import 하여 어떤 컴포넌트를 가져다 사용하고 있었습니다. 차크라ui 공식 홈페이지에 들어가 좀 더 살펴보기로 합니다.

"Box is the most abstract component on top of which all other Chakra UI components are built. By default, it renders a div element"
아하 기본적으로 div라는 엘리먼트를 가져오는군요. 스타일 지정은 props로 해주나 봅니다.

차크라ui 공식 홈페이지에서 처음 봤던 코드가 이해가 가기 시작합니다.
첫 Box는 오른쪽 구현사항의 가장 큰 box일 거고,, Image태그에 borderRadius라는 이름으로 md(medium)이라는 속성이 지정되어 있고.. 오 보기 편한데?

확실히 스타일 코드 구조를 한 눈에 파악하기 쉬웠습니다. 이런 식으로 확인할 수 있다면 position: absolute 속성을 사용할 때도 어느 요소를 기준으로 잡고 있는지 확인하기도 편하겠다는 생각을 했습니다.

2. Chakra UI 설치방법

사용하는 방법은 아주 간단합니다!

1 - Chakra UI 설치

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

2 - import, app의 root에서 ChackraProvider로 감싸주기

import { ChakraProvider } from "@chakra-ui/react"
function App() {
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

3. useColorMode()

dark mode, light mode

차크라ui의 편리한 점 중 하나는 컬러 모드를 변경하는 useColorMode라는 커스텀 훅(hook)을 제공합니다. 차크라ui는 localStorage에 color mode를 저장합니다.

사이트 공식 문서에 정리가 잘 되어 있는데요. js 코드와 더불어 typescript 유저들을 위한 ts용 코드까지 나와있습니다. 문서 내용을 따라 해당 파일을 추가해줍니다.

theme.ts

// theme.ts

// 1. import `extendTheme` function
import { extendTheme, type ThemeConfig } from '@chakra-ui/react'

// 2. Add your color mode config
const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: false,
}

// 3. extend the theme
const theme = extendTheme({ config })
export default theme

계속 읽다보면 next.js를 사용한다면 추가해야하는 파일을 알려 줍니다. _document.js파일 안에 ColorModeScript를 추가하라고 하네요.

pages/_document.js

import { ColorModeScript } from '@chakra-ui/react'
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import theme from './theme'
export default class Document extends NextDocument {
  render() {
    return (
      <Htmllang='en'>
        <Head />
        <body>
          {/* 👇 Here's the script */}
          <ColorModeScriptinitialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

아래에 있는 ColorModeSwitcher.tsx는 light mode와 dark mode를 토글 시켜주는 버튼 컴포넌트입니다.

ColorModeSwitcher.tsx
스크린샷 2022-11-04 오후 11 04 22

버튼을 클릭하면 라이트 모드 ↔ 다크 모드간 토글이 가능합니다!

추가로, useColorModeValue를 통해 각 모드에 원하는 값을 커스텀할 수 있습니다.

4. 그 외 유용한 기능 (컴포넌트 중심)

4-1. Flex 컴포넌트

팀원한테 차크라ui 영업을 당하면서 가장 솔깃했던 기능 Flex 태그 입니다. 무지하게 자주 쓰는 div 태그에 display: flex를 프로젝트하면서 한 x100000번 정도 쓴 것 같은데요. 차크라에서는 Flex라는 태그로 대신할 수 있습니다.

4-2. Center 컴포넌트

flex div내 에서 justify-content: center, align-items: center .. top에서 50%, left에서 50% 위치시키고 정중앙 위치하도록 transform -50%씩…

요소를 가운데 정렬하기 위해 애쓰던 우리의 모습 기억나시나요?

차크라ui에는 자식 요소를 가운데에 정렬해주는 레이아웃 컴포넌트 Center가 있습니다.

모달 컴포넌트가 하는 역할은 계속해서 반복합니다.

모달 내용을 보여주고,
모달 닫기 버튼,
모달 뒤 배경은 투명하게
모달 외부 영역 클릭 시 작동하지 않게,

이러한 기능을 몇번씩이나 구현했던 기능이 있습니다. 이러한 기능들을 반복했다는 사실을 차크라ui는 알고 있듯이 그대로 기능을 구현해줍니다.

모달 내용을 보여주고, → ModalContent
모달 닫기 버튼, → ModalCloseButton
모달 뒤 배경은 투명하게 → ModalOverlay
모달 외부 영역 클릭 시 작동하지 않게, → closeOnOverlayClick={false}

자세한 내용은 공식 문서로

5. 그냥 내 생각

차크라ui를 영업 당하면서 매력적인 기능이 너무 많다고 느껴졌습니다.

-스타일 코드 때문에 코드 길이가 길어져 스타일 코드를 분리할지 말지 고민할 필요도 없습니다.

-display: flex; justify-content: center, align-items: center 를 매번 치면서 '이거 진짜 어떻게 할 수 없나?'라고 생각했는데 차크라ui가 가려운 부분을 긁어준 느낌이었습니다.

물론 새롭게 쓰는 툴인만큼 차크라ui를 사용하게 되면 css에 따른 prop 이름도 알아봐야 하고, 모든 UI가 마법처럼 와랄라라 구현될 것이라고 생각하지는 않습니다. 그럼에도 차크라가 속시원하게 가려운 부분을 콕 집어 해결해 주는 모습을 보면서 한 번 써볼만한 라이브러리란 생각이 들었고, 이는 다음 프로젝트 때 차크라 사용을 결정하게 된 이유가 되었습니다. 이 글을 통해서 이런 스타일 라이브러리가 있구나 봐주시면 좋을 것 같습니다!

참고 사이트
https://chakra-ui.com/
https://www.youtube.com/watch?v=LnD5gMAJvcc

작성자
IN SOPT OB 웹 최유진