회사에 입사해서 처음 사용해본 chakra ui에 대해 공부할겸 velog에 정리해 보려고한다.
Chakra UI란?
Chakra UI는 리액트(React) 기반의 프론트엔드 개발을 위한 간결하고 모듈식의 컴포넌트 라이브러리이다.
💭 설치
npm, yarn 사용에 따라 chakra ui 패키지 설치방법 다르다.
난 yarn을 사용하기 때문에 아래 처럼 yarn add로 설치해주었다.
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm을 사용하는 경우
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
💭 ChakraProvider
설치가 완료된 후, 프로젝트에 Chakra UI를 적용하기 위해서는 ChakraProvider 컴포넌트를 사용해 애플리케이션을 감싸야한다. ChakraProvider를 사용하지 않으면, Chakra UI 컴포넌트들이 제대로 작동하지 않습니다.
ChakraProvider를 사용하게 되면
- 기본 테마 또는 사용자 정의 테마에 쉽게 접근할 수 있다.
- 라이트 모드와 다크 모드 사이를 전환하는 기능을 자동으로 관리한다.
- Chakra UI 컴포넌트들은 ChakraProvider 내에서 최적화되어 렌더링된다.
