Chakra-ui

이번에 Link Cloud 서비스의 웹 페이지에 구현에 사용하게 된 CSS 라이브러리 입니다.

처음 알게 된건 친구랑 (지금은 안하지만) 같이 했던 프로젝트에서 친구가 선택했던 라이브러리 였는데 당시 dark theme 선택 하는게 인상 깊어서 기억하고 있다가 이번에 bootstrap 외의 다른 라이브러리를 사용해보고 싶어서 선택하게 되었습니다.

설치

getting started 를 기준으로 작성했습니다.

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

app.tsx 혹은 index.tsx 에 ChakraProvider 를 적용해줍니다.

저는 react-router-dom 을 app.tsx 에 적용해두었기 때문에 app.tsx 코드를 수정합니다.

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react'
import Routers from './routes';

const App = () => {
  return (
    <ChakraProvider>
      <Routers />
    </ChakraProvider>
  )
};

export default App;

Theme

제가 가장 인상깊게 보았던 Dark mode 를 적용 할 수 있도록 코드를 추가합니다.

utils/theme.ts

import { extendTheme, ThemeConfig } from '@chakra-ui/react'

const config: ThemeConfig = {
  initialColorMode: 'dark',
  useSystemColorMode: false,
}

const theme = extendTheme({ config })

export default theme;

생성된 파일을 적용합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import theme from './utils/theme';
import { ColorModeScript } from '@chakra-ui/react';

ReactDOM.render(
  <React.StrictMode>
    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

그런데 막상 코드를 찍어보면 dark 모드로 구현하고자 했던 부분이 적용이 안되는 문제가 발생했습니다.

그래서 방법을 찾아보게 되었는데 V1 에서 업그레이드를 하게 되어 이전 레거시 답변이 너무 많아 따로 방법을 찾게 되었습니다.

찾은 해결법은 ColorModeScript 를 추가하지 않아도 app.tsx 에 있는 ChakraProvider 역시 theme 를 지정해주면 됩니다.

index.tsx 코드를 원복하고 app.tsx 코드를 다음과 같이 수정했습니다.

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react'
import Routers from './routes';
import theme from './utils/theme';

const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <Routers />
    </ChakraProvider>
  )
};

export default App;

이후 배포를 통해 확인해보니 정상 동작하는걸 확인 할 수 있었습니다.

라이브러리가 업그레이드 되면서 좀 더 좋아진건 좋지만 유명한 라이브러리는 이전 레거시가 오랫동안 남아 있어 최신 버전에 적용하기 힘들 수 도 있다는 교훈을 얻게 되어 좋으면서도 미묘한 기분이였습니다.

JoungSik/Chakra-ui

Chakra-ui

설치

Theme