컴포넌트
-
[ Project ] 컴포넌트 설계에 대한 고민 (Feat. 합성 컴포넌트)Project 2023. 9. 10. 17:03
- 최초 기획 UI 사진 속 Table 컴포넌트는 앞으로 다양한 모습으로 사용됩니다. 사진 속 UI처럼 가장 처음에 기획했던 Table 컴포넌트는 텍스트로만 이루어져 있습니다. 중간중간 기획에 대한 아이디어가 더해지면서 UI가 조금씩 다른 컴포넌트가 필요했고 자연스럽게 컴포넌트의 확장성, 재사용성에 대해서 고민을 하게 되었습니다. - 초기 코드 Table 컴포넌트는 Header, Content, Pagination 세 가지 컴포넌트로 구성되어 있습니다. // /components/common/table/Table.tsx // 생략 const Table = ({...props}) => { if (data.length === 0) return ; return ( ); }; export default Tabl..
-
[ Project ] React 재사용 버튼 컴포넌트 만들기Project 2023. 9. 1. 23:34
- 재사용 가능한 컴포넌트 여러 곳에서 사용되는 컴포넌트는 공통 컴포넌트로 만들어 사용하는 게 좋은 점이 많다. 1. 반복적인 코드를 작성하는 것은 시간과 노력을 낭비하는 것이므로, 공통 컴포넌트를 만들어 재사용함으로써 중복 코드를 줄일 수 있다. 2. 중복 코드가 많으면 동일한 로직 또는 스타일을 변경할 때 여러 위치에서 수정을 해야 할 수 있다. 공통 컴포넌트를 사용하면 하나의 위치에서만 수정을 하면 되므로 유지 보수가 훨씬 용이하다. 3. 요구 사항 변화나 기능 추가 시 공통 컴포넌트를 기반으로 확장하는 것이 더 쉽다. 등등 매우 많다. - 버튼 컴포넌트 버튼 컴포넌트는 프로젝트에서 빠질 수 없는 컴포넌트 중 하나이다. 지난 테오의 스프린트 때 만들었던 프로젝트에서 버튼 컴포넌트를 구현했던 코드를 ..