리액트에서 Progressbar 만들기

Chakra UI 설치

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

import

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

기본 Progress

<Progress value={80} />

Stripe있는 Progress

<Progress hasStripe value={64} />

Progress 바 크기 설정

<Stack spacing={5}>
  <Progress colorScheme='green' size='sm' value={20} />
  <Progress colorScheme='green' size='md' value={20} />
  <Progress colorScheme='green' size='lg' value={20} />
  <Progress colorScheme='green' height='32px' value={20} />
</Stack>

코드에 적용하기

1. Provider 설정

Chakra UI를 설치한 후 애플리케이션의 루트에서 ChakraProvider를 구성해야 한다. 실제 코드에서는 Progress 바가 필요한 컴포넌트에만 임포트하여 사용했다.

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

const FirstPage = () => {

    return (
        <ChakraProvider>
        ...
        </ChakraProvider>
    );
};

export default FirstPage;

2. Progress 바 설정

<Progress value={20} size='md' colorScheme='green'/>

이렇게 설정해주면 끝!