shadcn-UI에서의 hydration 오류 해결

 

Trigger는 버튼이다.

 
shadcn-UI를 사용하면서 dialog나 alertDialog, DropdownMenu 등 다양한 스타일을 사용하는 경우가 많다.
 
이것들을 사용할 때 지금까지 hydration 오류를 몇 번 만났지만, 개인프로젝트를 진행하면서 반응형 디자인을 적용하던 도중에 갑자기 발생하지 않던 hydraion 오류를 만나게 되어 해결하는데 시간을 소모했다. 
 
정확히 표현하면 문제라고보기 어려운데, 이제껏 잘 써왔던 부분을 놓쳐서, 어렵게 해결하는 데 시간을 소모한 것이 되었다.

dropdownMenuTrigger의 타입

 
위 이미지는 오늘 문제의 원인이 된 trigger인데, 이 trigger의 타입을 보여주고 있는 이미지이다.
 
최근 이 프로젝트를 진행하며 모바일 디자인을 하면서는 위 오류를 만나지 못했는데, 데스크탑 디자인을 하면서 컴포넌트를 새로 만들면서 만나게 되어 왜 발생하는지에 대한 원인을 찾던 중, 이것저것 만져봐도 해결이 안되서 타입을 살펴봐야겠다 생각하여 들여다보았다.
 
이 타입을 살펴보며 원인을 찾을 수 있었다. hydration 오류는 여러 원인 중에서도 button 요소 안에 또다른 button이 있을 때도 발생한다.
 
그런데 dropdownMenuTrigger은 버튼이었고, 이 내부에 button 요소를 써놨던 것이었다.
 
그래서 내부의 button 요소를 다른 요소로 바꿔주니 더이상의 hydraion 오류는 발생하지 않았다.
 

shadcn-UI를 사용한 프로젝트가 한두개가 아닌데 왜 이제서야 발견했을까?

 
지금까지 hydration 오류가 발생하면 이 부분에서 발생한 적은 없었다.
 
왜냐면 asChild 속성을 사용했었기 때문이다.
 
위 이미지를 보면 trigger 옆에 asChild가 없는 것을 확인할 수 있다. 
 
asChild는 자식요소로 다른 HTML 요소나 컴포넌트를 사용할 수 있도록 하기 때문에 trigger가 button이더라도 asChild 속성을 사용하면 자식요소로 button을 넣어도 오류가 발생하지 않는다. 
 
그리고 타입스크립트는 직접 타입을 지정하면서 발생하는 문제보다 서드파티 라이브러리를 사용할 때의 타입지정 시 오류발생이 더 많고 해결이 어렵다.
 
이번에는 타입 지정을 하면서 발생한 문제는 아니지만, 내게는 이번 오류가 이러한 점과 관련되어 발생하고 해결한(?) 케이스의 문제가 될 것 같다.
 
앞으로 이러한 어떤 라이브러리를 사용할 때 타입을 잘 파악한 후 사용해야겠다는 새로운 깨달음을 얻게 되었다.
 
그리고 잘 사용하던 것을 이렇게 놓친 것을 경험하게 되니, 이게 개인프로젝트가 아니라 협업이고 회사에서 이랬다면 팀에 상당한 부담을 안겨줬을 것 같다는 생각을 하게되었다. 
 
이 경험을 잘 새겨서 앞으로 현업에서 개발자로 활동할 때 정신차리고 개발을 해야겠다는 생각을 하게 되었다.