[React]React에서 Chakra UI 편리하게 사용하기

1. 시작

chakra UI는 emotion.js기반의 ui 라이브러리이다. 많은 컴포넌트들이 있고 전역변수 및 기본 컴포넌트들을 커스텀해서 사용할 수 있는 기능 등 많은 기능을 제공한다. 자세한 내용은 chakra UI 공식 docs에서 확인할 수 있다. 

https://chakra-ui.com/docs/components

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

설치

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

chakra ui는 emotion또한 같이 설치해주어야한다. 

 

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/react';
import { RouterProvider } from 'react-router-dom';
import { router } from '@/routes';
import theme from '@/styles/theme';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
	<React.StrictMode>
		<QueryClientProvider client={queryClient}>
			<ChakraProvider theme={theme}>
				<RouterProvider router={router} />
			</ChakraProvider>
		</QueryClientProvider>
	</React.StrictMode>,
);

그 후 index.tsx파일을 감싸주면 되는데 나는 현재 React Router v6.4.2를 사용하기 때문에 RouterProvider가 최상단 컴포넌트이다. (또한 framework로는 vite를 이용한다. )이 컴포넌트를 ChakraProvider로 감싸준다. `<ChakraProvider  theme={theme}/>` 안에 있는 theme은 변수 설정과 관련된 기능인데 후에 설명하도록 하겠다. 

 

2. 스타일링의 통일성

디자인 시스템에 대해 고민을 하다보면은 하나의 웹 페이지에서 기본으로 쓰이는 색상들이 있다. 보라색이 테마인 사이트도 있을 것이고 파란색이 테마인 사이트도 존재한다. 이와 같이 사이트 내부에서 반복적으로 쓰이는 색상같은 경우 변수화를 해 줄 필요가 있다. 왜냐하면 html태그들을 스타일링 할 때마다 직접 색상 코드들을 입력해서 주입하게 되면 나중에 변경을 할 경우 일일히 모든 색상 코드를 다 찾아 변경해주어야하는 불상사가 생기기 때문이다. 따라서 emotion.js에서도 <ThemeProvider >와 같은 기능을 제공하는 것처럼 emotion기반 라이브러리인 chakraUI도 이와 같이 색상이나 폰트 크기등 디자인 시스템을 변수화 할 수 있는 기능이 존재한다. 이 기능이 바로 앞서 말했던 <ChakraProvider theme={theme} / > 안에 들어있던 theme이다. 

 

theme 설정 방법

import { extendTheme } from '@chakra-ui/react';
import Button from '@/styles/Button';
import Input from '@/styles/Input';


const theme = extendTheme({
	colors: {
		primary: {
			sky: '#369FFF',
			lightSky: '#ACD7FF',
		},
		sub: {
			failure: '#E74C3C',
			border: '#C9CCCF',
		},
		
		white: '#ffffff',
	},

	fontSize: {
		xs: '12px',
		sm: '13px',
		md: '14px',
		lg: '16px',
		xl: '18px',
		xxl: '24px',
	},
});

export default theme;

다음과 같이 theme.ts파일을 만들어준다. 그 후 extendTheme을 이용해서 사용할 색상, fontSize등을 변수화 해준다. 

extendTheme인 이유는 ChakraUI는 이미 기본 theme이 존재하기 때문이다. 만약 추가로 사용할 theme이 존재하지 않는다면 ChakraUI에서 기본으로 제공해주는 theme을 사용해도 된다. 하지만 나는 theme을 커스텀하는 방향을 선택했다. 

 

다음과 같이 Theme을 extendTheme으로 설정해준 후 아까의 index파일에서 <ChakraProvider />태그 안에 theme속성으로 주면 된다. 

<Td textAlign="center" color="primary.sky" w="100px">
	{project.title}
</Td>

그러면 다음과 같이 chakraUI 컴포넌트 안에서 color="primary.sky" 와 같이 색상등을 변수화 해서 사용이 가능하다. 

 

 

3. 기본 컴포넌트 커스텀

chakraUI는 UI라이브러리인 만큼 기본 컴포넌트들도 이미 잘 구현이 되어있지만 이 컴포넌트들을 커스텀해서 사용하고 싶은 경우가 생각보다 많다. 이 때 필요한 기능이 defineStyleConfig이다. 이 기능을 이용하면 chakraUI에서 기본으로 제공하는 컴포넌트들에 내가 지정한 커스텀 variants들을 추가할 수 있다. 

 

defineStyleConfig

const Button = defineStyleConfig({
	baseStyle: {
		fontWeight: 'base',
		borderRadius: '8px',
	},

	variants: {
		OasisBlue: {
			backgroundColor: 'primary.sky',
			color: 'white',
			padding: '8px 24px',
			lineHeight: '24px',
		},

		OasisRed: {
			backgroundColor: 'primary.red',
			color: 'white',
			padding: '8px 24px',
			lineHeight: '24px',
		},
		
	},

	defaultProps: {
		variant: 'OasisBlue',
	},
});

export default Button;

defineStyleConfig는 baseStyle에서 처음 컴포넌트를 생성했을 때 기본 값을 지정해줄 수 있고 variants에서 내가 사용하고 싶은 css를 추가하여 원하는대로 컴포넌트들을 커스텀 할 수 있다. 또한 defaultProps에서 variant를 주게 되면 내가 지정한 variant의 css형식이 처음 Button컴포넌트를 만들었을 때 제공된다. 

그리고 export를 해준 뒤 아까 만든 theme에 추가해주어야한다. 

import { extendTheme } from '@chakra-ui/react';
import Button from '@/styles/Button';

const theme = extendTheme({
	components: {
		Button,
	},
	colors: {
		primary: {
			sky: '#369FFF',
			red: '#E74C3C',
		},
		
		white: '#ffffff',
	},

	fontSize: {
		xs: '12px',
		sm: '13px',
		md: '14px',
		lg: '16px',
		xl: '18px',
		xxl: '24px',
	},
});

export default theme;

위와 같이 theme안에 components를 설정하고 Button을 추가해주면 된다. 

따라서 만든 컴포넌트들은 다음과 같다. 

<Button variant="OasisBlue" p="16px 45px" marginTop="auto">
	검색
</Button>

사용방법은 그냥 ChakraUI기본 컴포넌트에 아까 지정한 variant이름을 주면 그 variant에 맞는 css속성을 적용해준다. 

 

이런 ui라이브러리는 실제 서비스를 만들 때 잘 이용하진 않지만 어드민 서비스와 같은 것을 만들때에는 많이 이용되니 편리하게 사용하는 방법을 알아두면 좋을 거 같다.