[React, ChakraUI, Storybook] ChakraUI, Styled Components

재밌는 갑자기 프론트 ^^

이번 프로젝트에서 나는 차크라Ui를 선택했다.

마이크로 프론트 패턴을 적용 중이라,

Next 앱별로 선택할 수 있는 부분에 자유도가 높기도 해서, 편하게 고를 수 있었다.

선택한 이유는

이름이 멋있다.

다양한 훅과, 개발 편의성을 제공한다.

작업하다 보니 스타일컴포넌트와 혼용이 안되는 문제가 있었다.

깃헙 이슈에는 앞으로도 지원하지 않을 예정이라고 한다..

그래도 이런 식으로 사용하면 styledComponent 처럼 사용할 수 있다.... ㅎㅎ

import { chakra, Box } from '@chakra-ui/react';

export const CustomRow = chakra(Box, {
  baseStyle: {
    display: 'flex',
    flexDirection: 'row',
  },
});

baseStyle에 있는 속성들은, 지정한 기본값이고,

불러와서 props넘기면 변경도 가능하다.

이런식으로 객체로 만들어서 넘길 수도 있다.
// Builder는 그냥 객체 만드는 도구. BoxProps는 charkaUi에서 제공하는 타입 (Box가 div랑 똑같다)

<CustomRow {...WrapperStyled}>

const WrapperStyled = Builder<BoxProps>()
  .width('304px')
  .backgroundColor('white')
  .display('flex')
  .borderRadius('12px')
  .transition('all 0.2s')
  .build();

storybook에서 안 보이는 문제가 있었는데.

yarn add @chakra-ui/storybook-addon
깔고

.storybook/main.js 에서

addons 배열에 "@chakra-ui/storybook-addon" 넣어주면 된다.

스토리북에 적용하면 이런 식으로 차크라ui에서 제공하는 component들을 확인할 수도 있다!



이지^^