Chakra-UI 시작하기

이 블로그에서는 Chakra-UI를 시작하는 방법을 알려드립니다.

비디오 자습서

차크라UI란?

Chakra-UI는 웹 사이트에서 사용할 수 있는 사전 스타일이 지정된 수많은 구성 요소와 유틸리티가 포함된 React UI 라이브러리입니다.

설치

nextjs를 사용하겠습니다.

yarn create next-app <my-app>

패키지 설치:

cd <my-app>
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

다음으로 Chakra-UI 설정

Component 구성 요소를 ChakraProvider 구성 요소로 래핑합니다.

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

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

export default MyApp

이제 chakra-UI 구성 요소를 사용할 수 있습니다.

구성 요소를 가져오는 방법

구성 요소와 유틸리티는 항상 @chakra-ui/react 패키지에서 명명된 가져오기로 가져옵니다.

import { Button, Text, Heading, Box, Link, useTheme } from '@chakra-ui/react'

const Index = () => {
    return <Heading>Heading 1</Heading>
}

export default Index

맞춤 스타일

스타일을 사용자 지정하는 방법에는 두 가지가 있습니다.

스타일 소품: 스타일 소품을 사용하면 거의 모든 CSS 속성을 소품으로 사용할 수 있습니다. See all the available style props.

const Index = () => {
    return (
        <Heading color='red' fontSize='5rem'>
            Heading 1
        </Heading>
    )
}

SX 소품: sx 소품을 사용하면 모든 사용자 정의 스타일을 객체로 사용할 수 있습니다. 모든 속성 이름은 카멜케이스여야 합니다.

const Index = () => {
    return (
        <Heading
            sx={{
                color: 'red',
                fontSize: '5rem',
            }}
        >
            Heading 1
        </Heading>
    )
}

색상 모드 변경

useColorMode 후크를 사용하여 색상 모드를 변경할 수 있습니다.

import React from 'react'

import { IconButton, useColorMode } from '@chakra-ui/react'

import { MoonIcon, SunIcon } from '@chakra-ui/icons'

const ToggleMode = () => {
    const { colorMode, toggleColorMode } = useColorMode()
    return (
        <IconButton
            icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
            onClick={toggleColorMode}
        />
    )
}

export default ToggleMode

라이트 모드

다크 모드

chakra-UI 테마 및 반응형 스타일에 대해 자세히 알아보려면 비디오 자습서를 시청하십시오.

일반적으로 사용되는 구성 요소

다음은 내가 가장 많이 사용하는 구성 요소 중 일부입니다.

Box

Aspect Ratio

Flex

Grid

Stack

Button

Input

Textarea

Text

Heading

Link

Icon

Image

뻔뻔한 플러그

React 및 Styled 구성 요소로 Xbox 랜딩 페이지 클론을 만들었습니다. 나는 당신이 그것을 즐길 수 있기를 바랍니다.
이 비디오를 좋아하고 내 채널을 구독하십시오.



이것이 이 블로그의 전부입니다. 간단하게 설명하려고 노력했습니다. 막히면 나에게 질문을 할 수 있습니다.

그런데 저는 제 능력으로 큰 가치를 제공할 수 있는 회사에서 새로운 기회를 찾고 있습니다. 풀 스택 웹 개발에 능숙하고 세상을 혁신하는 데 열정을 가진 사람을 찾고 있는 채용 담당자라면 언제든지 저에게 연락하십시오. 또한 모든 프리랜서 프로젝트에 대해 이야기할 수 있습니다. 나는 Upwork에서 사용할 수 있습니다

콘택트 렌즈

이메일: [email protected]

링크드인:

포트폴리오: anjan

Github: @thatanjan

인스타그램(개인):

트위터: