공통 컴포넌트에 유연성을 확장 시켜보자! by 합성 컴포넌트 패턴
React2024. 3. 31. 01:39공통 컴포넌트에 유연성을 확장 시켜보자! by 합성 컴포넌트 패턴

기존에 진행했던 SNS 플랫폼 기반 익명/기명 편지 서비스 "대박 사건" 프로젝트에서 각 페이지에 따로 구현되어 존재했던 편지 작성, 이전에 작성한 편지 수정, 댓글 작성 컴포넌트(모두 Textarea로 이루어짐)를 공통 컴포넌트로 묶어 재사용성을 높여보았다. 위 구조로 완성된 UI와 문제점에 대해 간단하게 알아보자. 위 사진의 주황색으로 표시된 컴포넌트 모두가 비슷한 UI를 가지고 있고 우측의 이전 편지 수정하는 컴포넌트만 버튼 아이콘 두 개가 추가되어있다. 위 UI를 바탕으로 현재 코드의 문제점은 코드의 중복. 이를 해결하기 위해 Textarea를 하나의 고정된 UI를 가지고 있는 공통 컴포넌트로 구현하려 고민했었고, 당시 생각했던 구조는 아래와 같다. 하지만 위와 같은 설계는 치명적인 단점이 존재했..

image