[React] 컴포넌트 추상화

어떻게 더 추상화를 잘할 수 있을까?

> 적절한 책임 부여

 

범용적인 컴포넌트

어떠한 도메인과 엮기지 않는 컴포넌트

도메인과 엮이면 분기 코드가 발생하여 컴포넌트 변경에 취약해진다

컴포넌트 자체가 수행하는 책임이 너무 많아 props가 증가된다면 복잡해지기에 합성으로 책임을 더 세분화 해야한다

 

카드의 스타일

asis > 하나의 컴포넌트에서 N개의 props	tobe > 여러 컴포넌트로 세분화
카드의 형태를 동그란 모양, 사각형 모양으로 바꿀 수 있어야 한다. 썸네일 아래에 나오는 텍스트를 2줄로 보여줄지 3줄로 보여줄지 결정할 수 있어야 한다. 텍스트를 제목, 설명처럼 구분하여 보여줄 수 있어야 한다. 썸네일을 여러 개를 합쳐 보여줄 수 있어야 한다.	카드 형태의 아이템을 보여준다. 썸네일이 둥근 형태의 카드 아이템을 보여준다. (RoundCardItem) 썸네일이 사각형 형태의 카드 아이템을 보여준다. (SquareCardItem) 썸네일이 여러 개인 카드 아이템을 보여준다. (MultiThumbnailCard)

 

도메인과 엮긴 컴포넌트

custom hook으로 기능과 뷰를 나눔

 

 

 

 

 

https://fe-developers.kakaoent.com/2022/221020-component-abstraction/

React 컴포넌트와 추상화 | 카카오엔터테인먼트 FE 기술블로그