[Chakra UI] React 적용

 

 

원래 MUI를 작은 프로젝트로 적용해 본 적이 있었는데, 이번에 Chakra UI라는 것을 듣게 되어, 현재 하고 있는 프로덕트에 적용해보려고 한다. (docs만 읽어봤을 때 꽤나 괜찮아 보였다.)

 

Chakra UI

'Ease of Modification'
Chakra makes it easier to customize components to be entirely your own - 컴포넌트 커스텀을 보다 더 쉽게 제공한다. 

 

Material UI  vs  Chakra UI

Material UI

반응형 스타일들을 제어하기 위해서 별도의 코드가 필요하다.

만약 사용자가 css를 커스텀을 하려면 별도의 코드가 비교적 많이 추가된다. : 즉, 커스터마이징이 적을수록 사용하는 것이 좋다.

 

Chakra UI

기본적으로 반응형 스타일들을 지원한다. 따라서 반응형을 위한 별도의 css 작업은 필요하지 않다.

사용자가 css를 커스텀하기에 적은 코드만으로도 구현이 가능하다. : 즉, 커스터마이징이 있으면 용이하다.

 

설치

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

Index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { ChakraProvider } from "@chakra-ui/react"; //추가

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <ChakraProvider>  //추가
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </ChakraProvider> //추가
);
reportWebVitals();

이렇게 3 부분 추가 해주면 된다. 

 

 

extendTheme

chakra-ui에서는 theme이라는 것을 제공해서 provider에게 넘겨주면, ui costomizing이 가능하다. chakra-ui에서 제공해 주는 default color 말고, 지금 만들고 있는 웹사이트의 퍼스널 컬러를 적용하기 위해서 아래와 같이 적용해 주었다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react"; //추가

//추가
const colors = {
	personal: "",
    diabled: "",
};

const theme = extendTheme({ colors }); //추가

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <ChakraProvider theme={theme}> //추가
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </ChakraProvider>
);

reportWebVitals();

 

 

간단하게 적용

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


 <Button colorScheme="blue">로그인</Button> //Use

더 사용해 보고 체감되는 장점들을 작성해 봐야겠다.