31:{"id":115,"imagesrc":"https://nfbbfuiostvsiknfaryn.supabase.co/storage/v1/object/public/images/uploads/fa29ddbd.png","date":"2024-08-31","tags":["Polymorphic","Vanilla-Extract"],"title":"Polymorphic한 컴포넌트 구현기","description":"Vanilla Extract를 곁들인","content":[{"id":"1","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Vanilla Extract","styles":{"bold":true}},{"type":"text","text":"로 디자인 시스템을 구축하면서 sprinkles를 활용해 디자인 토큰을 적용하는 방식이 반복적이라는 문제를 느꼈다. 매번 ","styles":{}},{"type":"text","text":"css.ts","styles":{"code":true}},{"type":"text","text":" 파일을 생성해야 했고, ","styles":{}},{"type":"text","text":"Tailwind","styles":{"bold":true}},{"type":"text","text":"처럼 props 기반으로 스타일을 적용할 수 있다면 더 효율적이지 않을까 하는 고민이 들었다.","styles":{}}],"children":[]},{"id":"5c3762a7-3b2c-4987-8396-abc4ceffafc0","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"42457d84-5521-4be4-ad65-cb1db8e30965","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"이 과정에서 ","styles":{}},{"type":"text","text":"스타일을 props로 전달하면서도 확장성이 높은 방식","styles":{"bold":true}},{"type":"text","text":"을 고민하게 되었고, 이런 문제를 해결하려고 여러 UI 라이브러리들의 패턴을 찾아보다가 ","styles":{}},{"type":"text","text":"Polymorphic 컴포넌트","styles":{"bold":true}},{"type":"text","text":"라는 재미있는 개념을 발견했다.","styles":{}}],"children":[]},{"id":"9564f715-43b5-40fd-9d78-8f6f98a217bc","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"421719f0-ebec-49c3-bddf-3add181e6331","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Box","styles":{"code":true}},{"type":"text","text":" 컴포넌트를 활용하면 ","styles":{}},{"type":"text","text":"as","styles":{"code":true}},{"type":"text","text":" prop을 통해 다양한 HTML 요소를 렌더링하면서도, sprinkles 기반으로 디자인 토큰을 props로 전달할 수 있었다. ","styles":{}}],"children":[]},{"id":"846ea05c-c406-4de1-8fc4-36b3f9efba90","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"이를 통해 ","styles":{}},{"type":"text","text":"Vanilla Extract의 디자인 토큰을 더 유연하고 타입 안전하게 적용","styles":{"bold":true}},{"type":"text","text":"할 수 있을 것이라 생각했다.","styles":{}}],"children":[]},{"id":"96024b8e-4eb0-4484-8a66-43b880174a36","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"실제로 다음과 같은 Headless UI 라이브러리에서 ","styles":{}},{"type":"text","text":"Polymorphic","styles":{"bold":true}},{"type":"text","text":" 컴포넌트를 활용하고 있었다.","styles":{}}],"children":[]},{"id":"38c92011-b125-4431-bd5f-684686bc127f","type":"bulletListItem","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"https://mui.com/material-ui/api/button/#Button-prop-component","content":[{"type":"text","text":"MUI component","styles":{}}]}],"children":[]},{"id":"919ba95a-e97b-4ad0-9fb1-c2d8b4ebb4b4","type":"bulletListItem","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"https://mantine.dev/core/button/#polymorphic-component","content":[{"type":"text","text":"Mantine polymorphic component","styles":{}}]}],"children":[]},{"id":"d91900af-d302-4c35-9bef-30f785409ea8","type":"bulletListItem","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"https://chakra-ui.com/community/recipes/as-prop","content":[{"type":"text","text":"Chakra as prop","styles":{}}]}],"children":[]},{"id":"c6fe7149-ee45-4871-8a07-b58224d6b408","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"그렇다면 ","styles":{}},{"type":"text","text":"Polymorphic","styles":{"bold":true}},{"type":"text","text":" 컴포넌트란 무엇일까?","styles":{}}],"children":[]},{"id":"5053055d-9efd-414d-a035-e6d7028962ca","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"216b4137-b631-493a-abf5-d48c9120a19f","type":"heading","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left","level":2},"content":[{"type":"text","text":"Polymorphic 컴포넌트란?","styles":{}}],"children":[]},{"id":"902aa22f-00b9-43cd-989e-c3278b17ea42","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Polymorphic","styles":{"bold":true}},{"type":"text","text":"이란 ","styles":{}},{"type":"text","text":"여러 개의 형태를 가진다","styles":{"bold":true}},{"type":"text","text":" 라는 의미를 가진다.","styles":{}}],"children":[]},{"id":"b578deb5-9590-4c61-b74a-e1e5e67dce3f","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"리액트에서 ","styles":{}},{"type":"text","text":"Polymorphic","styles":{"bold":true}},{"type":"text","text":" 컴포넌트란 전달받은 props에 따라 다른 HTML 요소나 컴포넌트로 렌더링될 수 있는 컴포넌트를 말한다.","styles":{}}],"children":[]},{"id":"5e9c6050-9a7b-4b92-a24a-b08936ca644a","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"즉, ","styles":{}},{"type":"text","text":"어떤 컴포넌트로든 변할 수 있는 가장 추상화된 형태의 컴포넌트","styles":{"bold":true}},{"type":"text","text":"라고 볼 수 있다.","styles":{}}],"children":[]},{"id":"a6800e36-6f9e-4da4-92a6-96f26a1ecb35","type":"codeBlock","props":{"language":"tsx"},"content":[{"type":"text","text":"제목\n문단\n버튼","styles":{}}],"children":[]},{"id":"4ed82f1d-7a53-4696-bac3-a9c81ff8832e","type":"image","props":{"backgroundColor":"default","textAlignment":"left","name":"image.webp","url":"https://nfbbfuiostvsiknfaryn.supabase.co/storage/v1/object/public/images/uploads/c21df557.webp","caption":"","showPreview":true,"previewWidth":734},"children":[]},{"id":"d92a3cbf-a9dd-4ce3-9881-14fbabf635e3","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"✔ ","styles":{}},{"type":"text","text":"하나의 컴포넌트로 다양한 요소를 표현","styles":{"bold":true}}],"children":[]},{"id":"2bdc61be-1ddb-4ba5-af2e-98aba1c6dd55","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"→ ","styles":{}},{"type":"text","text":"

","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"
","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"