Chakra UI?

Chakra UI는 접근성과 재사용성이 뛰어나고 구성 가능한 React 컴포넌트의 포괄적인 라이브러리다.
웹/앱 개발을 간소화해주며 복잡한 인터페이스를 구축하되 쉽게 결합 가능한 다양한 컴포넌트를 제공한다.

• Accessible 모든 컴포넌트에 대해 표준 WAI-ARIA 를 엄격히 따른다
• Themeable 모든 요소에 대해 사용자 정의 가능
• Composable 구성요소의 결합이 쉬움
• Light and Dark UI 다크모드 지원
• Developer Experience 생산성을 높이는 개발경험 제공
• Prop-based

Components

개인적으로 다양한 컴포넌트가 날 사로잡았다.

바닐라JS, CSS로 구현할 생각을 하면 막막한 것들이 컴포넌트로 이미 만들어져있다. 날먹이 가능하다.

Styled System

prop-based 라이브러리답게 다음과 같은 props가 제공된다. 가독성도 좋고, 쓰기에도 한결 편한 것 같다.

DarkMode

다크모드가 단 몇 줄로 구현 가능하다. 차크라가 알아서 적용해주는 것이기 때문에 몇 요소가 마음에 들지 않을 수 있는데, 내세우는 장점답게 개별 사용자 정의가 가능하다.

Setup

설치
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion or
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

적용

import { ChakraProvider } from "@chakra-ui/react"
function App() {
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

+ React, react-router-dom과 함께 사용 시 라우터를 만들어 RouterProvider에 넘겨주면 된다.

react-router-dom 버전이 5에서 6으로 넘어감에 따라 라우터 사용 방법이 바뀌어서 일단 적어뒀다 ㅎㅎ;

import { ChakraProvider } from "@chakra-ui/react";
import { RouterProvider } from "react-router-dom";
import router from "./router";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);

++router 예시
존재하지 않는 페이지일 경우 errorElement의 컴포넌트가 반환된다.

import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <NotFound />,
    children: [
      {
        path: "",
        element: <Home />,
      },
    ],
  },
]);

---

의견

컴포넌트 라이브러리를 전에 사용해 본 적이 없는데 너무 편하다. 반복적으로 작성하던 것들이 단 하나의 컴포넌트 안에 포함되어 있다는 게 확실히 효율을 높여줄 것 같다. 직접 만드는 것 보다 훨씬 예쁘게 만들어지는 것 같다 ㅋㅋ;
지금은 강의를 들으면서 따라 만들고 있지만, 개인 프로젝트를 만들어볼 때 사용해 볼 예정이다. 단점들 및 다른 라이브러리와의 비교도 해봐야할 것 같다.