컴포넌트 재사용성
약 90초
재사용 가능한 컴포넌트 구조를 만들어 개발 효율을 높인 경험
팀 프로젝트에서 비슷한 UI가 여러 페이지에 반복되는데 각각 따로 만들다 보니 같은 변경을 세 군데서 해야 하는 상황이 발생했습니다.
공통 컴포넌트를 분리하여 버튼, 모달, 폼 입력 등 반복되는 요소를 한 곳에서 관리하는 구조로 변경하였습니다. 처음에는 컴포넌트를 너무 세분화하여 오히려 props 전달이 복잡해지는 실수를 하였지만, '이 컴포넌트를 다른 곳에서도 사용할 것인가'를 기준으로 쪼개는 단위를 조절하였습니다.
구조를 변경한 후에는 디자인 변경이 생겨도 한 파일만 수정하면 되었습니다. 프론트엔드 서비스가 성장할수록 처음에 설정한 구조가 속도를 결정한다는 것을 그 경험에서 배웠습니다. 그 경험이 컴포넌트 설계를 먼저 고민하는 습관을 만들어주었습니다.
이 결의 특징
팀 프로젝트에서 비슷한 UI가 여러 페이지에 반복되는데 각각 따로 만들다 보니 같은 변경을 세 군데서 해야 하는 상황이 발생했습니다. 공통 컴포넌트를 분리하여 버튼, 모달, 폼 입력 등 반복되는 요소를 한 곳에서 관리하는 구조로 변경하였습니다. 처음에는 컴포넌트를 너무 세분화하여 오히려
이 결이 통하는 자리
'이 컴포넌트를 다른 곳에서도 사용할 것인가'를 기준으로 쪼개는 단위를 조절하였습니다. 구조를 변경한 후에는 디자인 변경이 생겨도 한 파일만 수정하면 되었습니다. 프론트엔드 서비스가 성장할수록 처음에 설정한 구조가 속도를 결정한다는 것을 그 경험에서 배웠습니다. 그 경험이 컴포넌트 설계를 먼