UI 컴포넌트 사용 질문

Question

안녕하세용.리액트에서 컴포넌트 이것저것 만들어서 쓰고 있습니다.입력 폼이 있을 때, RHF를 쓰는 경우에 외부 UI 라이브러리들을 쓰면 RHF 와 연동이 자연스럽게 안되는 경우가 종종 있다고 들었습니다.Material-UI, Ant Design 같은 것들...그러다 문득 생각났는데 그러면 라이브러리마다 RHF와 엮어서 쓰는 방법들이 각각 다른 것인가요.제가 외부 UI 라이브러리를 써본 적이 없어서 여쭤봅니다.맨날 수제 컴포넌트만 써봐서리...

RWB · Answer

RHF도 외부 라이브러리다보니, 기본적인 DOM 말고는 자연스럽게 연동되지 않습니다. (사실 생각해보면 당연하죠)MUI, Antd, Shadcn 등, 결국 까보면 네이티브 input이 존재합니다.위와 같은 라이브러리처럼, 네이티브 돔과 적절히 잘 연동한 컴포넌트라면, 얼마든지 RHF와 연결할 수 있습니다.질문자분의 언급을 빌려, "자연스럽게 안 될 뿐"이죠.저 또한 한창 MUI를 썼을 때, RHF를 연동해서 잘만 사용했습니다.Antd 같은 경우, 중국산이라 그런지, 내부적으로 RHF랑 똑같은 이름의 훅을 제공합니다. 사용법도 거의 비슷해요.물론 기본적으로 대응해주진 못해도, 기본적인 input 보다 라이브러리 컴포넌트를 사용하는 케이스가 훨씬 많기에, 보통 확장 방법을 제공합니다. RHF의 경우 컴포넌트가 그렇구요.export const FormInputText = ({ name, control, label }: FormInputProps) => { return ( ( )} /> ); };이런식으로 Controller를 통해 직접 확장하여, 원하는 컴포넌트에 붙이는 방식입니다.input과 달리, RHF는 각 라이브러리의 구조를 모르니, 우리가 직접 조립해서 사용하는 방식입니다.render 프로퍼티가 함수 형태로 이루어져있어, 매칭에 필요한 프로퍼티를 제공합니다. value 등, onChange 등 목적에 맞게 조합해서 사용하시면 됩니다.물론 직접 조립이니만큼, RHF과 MUI의 구조를 잘 이해하셔야 잘 쓸 수 있습니다.

ExpoProvider · Answer

ShadCN 은 그 자신만의 또다른 생태계를 만들어가고 있는 느낌입니다.하지만, 현업에서는 생산성을 생각하지 않을 수 없는데, 이 때문에 많은 분들이 Styled-Components 쪽으로 눈을 돌리는 경우가 많은 것 같습니다. Unstyled 보다는 진입장벽이 낮기 때문이죠.그러나 제 의견은 많이 다른데요... ShadCN 의 Unstyled Component 는 무한한 확장성을 제공한다고 생각합니다.Material, Ant, Daisy 등.. Styled Component 의 장점들도 있겠습니다만....tailwind 쪽으로 눈을 돌리면, dark mode 등 테마 전환도 손쉽고, design system 으로 통일된 다자인 상수를 유지할 수 있습니다. https://until.blog/@ganymedian/-4--form-handling-in-react#form-component-&-ui-component이건 이 문제를 생각해봤던 블로그이고요..https://stackblitz.com/~/github.com/KangWoosung/shadcn-exercise?file=src/App.tsx이건 제 깃헙으로 생성한 스택블릿츠입니다. components/ui 의 컴포넌트들을 원하는 아무 프로젝트에서 가져다 쓸 수 있습니다. 스타일은 tailwind className 으로 지정해주면 됩니다.shadCN 에는 최근에, tweak 도 생겼습니다.https://tweakcn.com/editor/theme

UI 컴포넌트 사용 질문

2개의 답변

Q&A 목록