.png?table=block&id=7c4a7fdd-1ef3-4e89-8b54-069a746e5853&cache=v2)
React 개발을 위한 component 라이브러리 중에 저는 Chakra-ui 를 사용하고 있습니다. 이 라이브러리는 모바일 최적화 기능과 여러 가지 컴포넌트를 편하게 구현할 수 있습니다. Chakra-UI 의 장점과 단점을 알아보겠습니다.
Chakra-UI ?
Chakra-UI 는 상당히 편리한 라이브러리이다. 비슷한 라이브러리로는 MUI(Material UI) 가 있고, MUI 가 솔직히 더 많은 컴포넌트와 깔끔한 디자인을 지원하긴 한다.
그런데 블록체인 쪽 개발 사이트들을 보니까 은근히 Chakra-UI 가 많아서 사용하다보니 상당히 편리한 점이 많이 있었다.
특히 컴포넌트는 부족할지 몰라도 style 꾸미는걸 별도의 css 나 className 설정이 없어도 간단히 해결이 가능하다.
<HStack spacing='24px'> <Box w='40px' h='40px' bg='yellow.200'> 1 </Box> <Box w='40px' h='40px' bg='tomato'> 2 </Box> <Box w='40px' h='40px' bg='pink.100'> 3 </Box> </HStack>
위 코드 예제는 단순히 div 부분을 3개 나누고 각각 가로로 정렬하는 코드이다.
미리 지정되어 있는 w, h, bg 값으로 css 없이도 스타일링이 가능하다.
여러가지 styling 을 위한 라이브러리들이 많은데, 웹 페이지 꾸미는걸 싫어하는 나에게 그냥 단순히 javascript(or typescript) 로만 구현이 가능한게 상당히 편하다고 생각한다.
위의 페이지를 실행하면 위와 같이 실행된다.
Chakra-UI 의 대표적인 장점들
장점은 간단히 사이트에서 소개된 내용을 보는게 빠를 것 같다.
위 비교는 사용자들이 많이 쓰는 Tailwind CSS 랑 비교를 해두었는데 기존 CSS 방식을 쓰는 사용자들에게는 Tailwind 가 편할 수도 있지만 내용을 학습해야 하는 점이 좀 시간이 걸린다고 한다.
또한 반응형 스타일을 작성하는 데에 있어서, Chakra-UI 가 배열 방식과 개체 방식으로 정의할 수 있어서 유용하다.
실제로 나도 반응형 스타일 작성에 있어서, 너무 편하게 작성하고 있다. 모바일 페이지에 맞춰서 개발하는 것에 대해 전혀 어려움을 느끼지 않고 있다.
추가적으로 스타일을 재정의 하는 데에 있어서, 상당히 간편하다.
성능 이슈?
하지만 편하긴 하지만 성능의 이슈가 분명히 있다.
차크라 사이트에도 언급되어 있듯이 성능에 민감하고 자주 변경되는 데이터를 처리할 때는 좀 이슈가 있을 수 있다고 한다.
하지만 큰 규모를 구현하는 게 아니면 괜찮다고 하는데, 이번에 구현하던 내용 중에 Table 을 구현하면서 많이 느리다는 것을 깨달았다.
위는 내 사이트에서 개발자 모드로 확인한 모습이다.
렌더링 될 때마다 하얀 박스로 그려주게 되는데, 데이터 값이 안 바뀌었는데도 다시 그리는 모습을 볼 수 있다.
최대한 memo 와 불변성 유지 등의 조건을 다 셋팅해도 어김없이 저런식으로 계속 렌더링되는 이슈가 있다.
이 이슈를 처음에는 아직 웹 개발에 서투른 내 잘못이라고 생각을 했는데, table 을 줄여서, 잘 되는 예제를 chakra-ui 의 컴포넌트들로 구현을 해봐도 동일한 현생이 발생하였다.
그래서 한번 Pure html 태그들로 표를 다시 그려보니, 값이 바뀌는 애만 렌더링 되는 것을 확인하였다.
즉 Box, Text 와 같은 컴포넌트를 아무리 React.memo 등을 이용하여 최적화를 하더라도, 값이 안바뀌더라도 렌더링이 된다.
그래서 결국 선택한게 Table 부분은 Chakra-UI + Tailwind CSS 로 변경하고 있다.
다른 UI 컴포넌트 들은 별 문제가 없는데, 데이터를 계속 바꿔줘야 하는 Table 같은 것은 Chakra Component 들로 구현을 하면 성능 상에 이슈가 있을 것이다.