chakra UI란?
"Chakra UI"는 React 애플리케이션을 빌드하는데 필요한 블록을 제공하는 간단하고, 모듈적이며, 접근가능한 컴포넌트 라이브러리다.
chakra UI를 선택한 이유
- 간결함과 생산성: Chakra UI는 잘 만들어진 컴포넌트 세트를 제공하여 개발 속도를 높인다. 이를 통해 더 빨리 프로토타이핑하고 애플리케이션을 구죽할 수 있다.
- 스타일링의 용이성: Chakra UI의 스타일링 시스템은 스타일 props를 통해 컴포넌트에 직접 스타일을 적용할 수 있어 매우 편리하다. 이는 CSS 파일을 따로 관리할 필요 없이 UI를 빠르게 조정할 수 있도록 해준다.
- 응답성: Chakra UI 컴포넌트는 모바일 우선의 접근 방식을 취하며, 다양한 화면 크기에 쉽게 조정될 수 있다.
- 접근성: Chakra UI는 WAI-ARIA 권장 사항을 준수하며 접근성이 좋은 웹사이트 구축하는 데 도움을 준다.
- 테마화 및 사용자 정의: 기본 테마는 사용자의 컨셉에 맞게 쉽게 조정할 수 있고, 컴포넌트의 스타일을 전역으로 변경할 수 있는 기능을 제공한다!
- 커뮤니티와 지원: 활발한 커뮤니티와 좋은 문서로 지원을 받으며, GitHub, Discord 또는 다른 플랫폼에서 질문하고 경험을 공유할 수 있다!
- 그외 다양한 컴포넌트 (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를 변경하게 해주는 훅 등...)를 지원한다!
=> 프로젝트에 적용해가면서 좋았던 점들이 추가로 더 생기면 더 업로드할 예정이다.
Chakra UI의 단점
- 패키지 크기: Chakra UI는 많은 기능을 포함하고 있어서, 작은 프로젝트의 경우 필요이상의 번들 크기가 커질 수 있다.
- 학습 곡선: 모든 컴포넌트 라이브러리와 마찬가지로, Chakra UI의 작동 방식과 스타일링 방법을 익히는 데 시간이 걸릴 수 있다.
- 유연성과 제한: Chakra UI는 상당히 유연하지만, 때때로 매우 구체적인 디자인 요구사항을 충족하거나 고유한 UI 패턴을 구현하기 위해 제한적일 수 있다.
- 버전 업데이트와 변화: 기술 스택의 지속적인 업데이트로 Chakra UI 자체도 변화하고 있다. 이 변화가 기존 프로젝트에 영향을 줄 수 있으며, 유지보수에 추가 작업이 필요할 수 있다.
=> 프로젝트에 적용해가면서 불편했던 점들이 추가로 더 생기면 더 업로드할 예정이다
Chakra UI 적용 방법
세팅
yarn add @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motionProviders.tsx 생성
Chakra UI는 Client Component에서만 동작하므로 Providers 생성시 "use client"를 붙여 생성해줘야 한다.
// src/app/providers.tsx
'use client'
import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'
export function Providers({
children
}: {
children: React.ReactNode
}) {
return (
<CacheProvider>
<ChakraProvider>
{children}
</ChakraProvider>
</CacheProvider>
)
}layout에서 Provider로 감싸기
Client Component로 만든 Provider로 감싸주기 때문에 Client Component에서만 동작하는 Chakra UI의 구성요소와 hook을 사용할 수 있게 된다. Provider의 props인 theme에 옵션값을 넣어 테마 스타일을 변경할 수도 있다.
import localFont from 'next/font/local'
import { Providers } from './providers'
const mainFont = localFont({
src: './fonts/Helvetica.ttf',
display: 'swap',
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<Providers>
<body className={mainFont.className}>{children}</body>
</Providers>
</html>
)
}자세한 적용 방법 아래 링크 영상/사이트 참고
프론트엔드 개발자가 되기위해 기록하고 공유하는 Zoey 블로그입니다.