Chakra UI에서 Headless UI 라이브러리로 전환

[minjongbaek]

최근 Next.js 13의 App Router를 적용하면서 모든 페이지에 "use clinet";를 사용해야 했어요. 이는 사용하고 있는 Chakra UI 라이브러리 내부에서 useRef, useState, useEffect 등과 같은 리액트 훅을 사용중이기 때문인데요. 개발자가 모든 페이지에 use client 지시문을 상단에 작성해야 하고, 제대로 된 서버 컴포넌트를 작성할 수 없다는 것이 큰 단점으로 보여요.

처음에는, Chaka UI가 Next.js 혹은 서버 컴포넌트를 지원할 때 까지 기다려보려 했으나, Chakra UI의 크리에이터의 코멘트를 보고 새로운 솔루션을 찾아야 겠다고 생각했어요.

제가 글을 읽고 이해한 바로, 현재 Chakra UI는 date picker와 custom select를 작업하고 있는 상황이며 모놀리틱한 구조의 변경을 새로운 시스템으로 대체하는 것으로 보여요. 그래서 Chakra 팀은 Headless UI를 위한 ark 라이브러리를 새로 만든 것으로 보여요.

더 좋은 생산성과 결과물을 얻기 위해서는 Chakra UI의 향후 업데이트를 기다리는 것 보다 지금 상황에서 택할 수 있는 최적의 선택을 하는 것이 더 좋을 것 같아요. 제가 생각하는 좋은 선택은 Headless UI 라이브러리로 전환하는 것이에요.

• Ark UI
• headless UI
• Radix UI
• etc...

물론 마이그레이션 과정이 쉽지는 않겠지만 Headless 컴포넌트, 서버 컴포넌트를 중심으로 한 프론트엔드 생태계의 최근 동향을 파악하기에 좋은 기회가 될 것 같아서 제안을 드리게 되었어요.

찬/반, 다른 의견 등 어떤 코멘트도 좋아요.

@gxxrxn @hanyugeon @WooDaeHyun

참고

• Support for NextJS 13 App Router
• The future of Chakra UI

[hanyugeon]

이에 대해 좀 알아봐야할것같네요 🤔
이걸 주제로 회의때 같이 이야기 해봐도 좋을것 같아요 👍

[minjongbaek]

https://nextjs.org/docs/getting-started/react-essentials#recommended-pattern-passing-server-components-to-client-components-as-props

클라이언트 컴포넌트 내부에 위치한 서버 컴포넌트