— ChakraUI, React, Emotion — 2 min read
graphQL 튜토리얼을 하면서 처음 Chakra UI를 사용해보았다. style props를 활용하는 방식이 편안하게 느껴졌다. 내가 속한 창업팀에서 알파버전을 진행하면서, 이 라이브러리를 사용할지 검토하게 되었고, 사용하고 있다.
Opinionated and designed for daily use.
우리는 도구에 대해서 사용감에 대해 후기를 찾게된다. 사용자가 사용방식과 매커니즘을 잘 이해하는 사람일 수록, 도구는 활용도가 높아지는 만큼, 먼저 사용해본 사람의 후기를 찾아봤다. 후기들을 읽고 이 라이브러리를 채택하고, 최대한 활용해야겠다고 판단했다.
아래 후기는 Chakra 사용 중에 느낀 단점들을 논하고, 본인은 여전히 Chakra의 팬임을 자처한다. 이 글을 읽으면서 컴포넌트 스타일링 라이브러리가 갖는 트레이드오프를 이해하고 under the hood의 동작을 약간 더 이해하게 되었다.
2020 06 24
최근 새로운 디자인 시스템을 만들기 위해 몇 주간 Chakra UI를 사용하고 나니, 이 라이브러리에 대해서 적절한 비평을 할 수 있을 거 같다.
Chakra UI는 under the hood 에서 Styled System과 Emotion을 사용하는 리액트 컴포넌트 라이브러리다. 이 둘을 조합해서, 컴포넌트가 utiltiy props를 사용하게 한다 : <Button color="primary" textAlign="center"/>. 마치 Tailwind 가 리액트 props를 만난 거 같다 - 대신 Tailwind와 달리 나의 커스텀 theme에 바인딩 되어있다. Rebass같은 다른 스타일 시스템기반 UI 라이브러리와 비슷하면서도 더 많은 기능이 있다.
나는 앱을 개발할 때, utility style props를 정말 즐겨 사용했다. 스타일링을 쉽고 빠르게 사용해서 프로토타입을 만들어낼 수 있는 강력한 패러다임으로 생각했다. 20 줄짜리 css media query들을 responsive width props로 한번 써본다면, 다시 돌아갈 수 없을 만큼 좋다는 걸 알거다.
<Switch> ,<Checkbox> 그리고 몇몇 개 컴포넌트는 어느정도 스타일링 할 수 있지만, 내부적으로 접근할 수 없는 요소가 내재되어 있다.
<Switch> 를 예를 들면 스타일링 된 div요소를 가지고 있는데, 그 요소의 style props에 접근하는게 안된다. 내부 요소의 너비를 키우고 싶은데, 직접 너비로 접근할 수 없고, 디자인 시스템의 다른 요소의 영향을 받는다. 이 경우에는 font-size에 영향을 받는다.( 크기가 font-size에 기반하기 때문에, 그걸 키우면, 텍스트 크기도 같이 커진다.) Chakra는 size변수(small, medium, large)를 가지고 있는데, 결국 그냥 large를 사용하면서 필요하면 transform: scale(2)를 사용했다.
또 <Checkbox>를 사용하면서 icon을 커스텀하려고 했는데, Chakra의 소스코드를 붙여넣고 바꿔놓지 않고서는 변경할 수 없었다. <Icon>컴포넌트는 <Checkbox> 내부에 중첩된 상태로 SVG icon을 반환한다. CSS trick으로 그 아이콘을 지우고, background 프로퍼티로 다른 걸 보여줄 순 있지만, 이쯤 되면 좀 hacky해진다.
이 경우는 좀 이상하고 이해하기 어려운데. 툴팁의 arrow를 스타일링 해야하는 경우에, 이게 React portal을 사용하기때문에 소스코드를 가져와서 수정해야했었다.
Chakra는 일반 CSS 상태(hover, focus 등) 대부분에 대해 props을 제공한다. 그렇지만 CSS로 더 강력한 로직을 활용할 수 있는 경우가 많다.
sx props를 제공하지 않는다.Rebass같은 다른 utility prop기반 라이브러리의 장점은 직접 객체기반 CSS를 작성할 수 있는 styling prop을 제공하면서, theme property도 문자열로 사용할 수 있다는 것이다. (<Box sx={{ borderColor: "primary" }}> 에서 primary 는 테마에서 가져온다.) 대신, css helper utiltiy를 사용해야하고, theme hook 과 조합해서 컴포넌트로 전달해야한다. 꽤 번거롭다.
1/*@jsx jsx*/2import {css} from "@chakra-ui/core"3// grab the theme4const theme = useTheme()5// add the sRRREREEERtyles6const styles = css(stylePropObject)(theme)7// pass it to css prop8<Box css={styles} />