Chakra UI ⚡️를 사용해야 하는 이유는 무엇입니까?

코딩을 시작하기 전에 한 가지 중요한 질문이 항상 떠 올랐습니다. "구성 요소의 스타일을 지정하는 것이 좋은 라이브러리는 무엇입니까?"

Bootstrap, Material UI 또는 styled-components와 같은 다양한 라이브러리에서 작업했습니다. 그리고 이미 큰 대안이 있는데 왜 다른 UI 라이브러리가 필요한지 생각할 수 있습니다.
최근 Chakra UI ⚡️는 접근성과 높은 커스터마이징으로 많은 관심을 받고 있습니다.

설치⚙️

Chakra UI는 NPM/Yarn을 통해 설치할 수 있습니다.

// If you are using npm:
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

// or, using Yarn:
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

패키지가 설치되면 공급자를 구성해야 합니다.

import { ChakraProvider } from "@chakra-ui/react";

function MyApp({ Component, pageProps }) {
    return (
        <ChakraProvider>
            <Component {...pageProps} />
        </ChakraProvider>
    );
}

export default MyApp;

Chakra UI의 이점 📖

Simpler Components : Chakra UI의 가장 큰 특징은 구성 요소를 함께 구성할 수 있도록 작게 설계한 것입니다. HTML 태그와 동일하게 배열하여 더 큰 요소를 쉽게 만들 수 있습니다.

Box 및 Text는 각각 div 및 p 태그와 마찬가지로 가장 기본적인 구성 요소입니다.

<Header>
 <Box w={{ base: "70%", sm: "50%", md: "40%" }}>
   <Text>Hey, Adyasha!</Text>
   <Button>Click me</Button>
 </Box>
</Header>

@chakra-ui/react에서 Header , Box , Text 구성 요소를 가져오는 것을 잊지 마십시오.

Note: For better sight, you can check the official documentation, there you can see plenty of components which will be enough for building your project.

간편한 테마 및 사용자 지정: Chakra UI의 장점 중 하나는 디자인 요구 사항에 맞게 쉽게 조정할 수 있다는 것입니다. 스타일 폴더 안에 theme.js 파일을 생성합니다. 글꼴 모음, 글꼴 크기, 색상, 중단점 등과 같은 항목을 지정할 수 있습니다.

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

const customtheme = extendTheme({
        Heading: {
            variants: {
                h1: {
                    fontSize: '4xl', fontWeight: 'bold'
                },
                h2: {
                    fontSize: '2xl', fontWeight: 'semibold'
                }
            }
        }
})

export default customtheme

다크 모드 지원 : 기본적으로 Chakra의 구성 요소 대부분은 다크 모드와 호환됩니다. theme config에 약간의 변화가 있고 당신은 갈 수 있습니다 ✈︎

Note: In some cases, when you switch to dark mode and refresh the page, you might experience a quick flash of white mode before it switches correctly and they're looking to fix it.

반응형 스타일 : Chakra UI는 기본적으로 반응형 스타일을 지원합니다. 이를 추가하기 위해 기본 중단점을 설정하거나 직접 생성할 수 있습니다.

import { createBreakpoints } from "@chakra-ui/theme-tools"

const breakpoints = createBreakpoints({
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
  "2xl": "96em",
})

이 중단점을 사용하여 box 또는 div 크기를 조정할 수 있습니다.

<Box width={{sm: '200px', md: '400px', xl: '600px'}}>
  Me, fully responsive :)
</Box>

미리보기 👀:

나는 간단한 프로젝트를 만들었거나 NextJS와 Chakra UI로 landing page라고 말할 수 있습니다. 이 프로젝트의 이유는 Chakra UI의 기능에 대해 더 많이 배우기 위해서이며 지금까지 시도한 가장 쉬운 구성 요소 라이브러리였습니다. .

미리보기:

This is all only a little model I think if you want to cover all the customisation of this library go check the official documentation.

📍결론:

유망한 새 도서관으로서 지속적으로 개선되고 있으며 도서관 주변에 과대 광고가 이루어지고 있습니다. 더 많은 구성 요소가 곧 추가될 것입니다. 따라서 다음 React 프로젝트에 사용하는 것을 고려할 수 있습니다. D

나는 💙에서 내가 생각하는 것을 공유합니다. 이 게시물은 내blog 페이지에도 게시되어 있습니다.

🙌 응원해주세요:

내 프로젝트는 커피 ☕로 연료를 공급받습니다. 하나 사주세요!