게시글은 리액트 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive

컴포넌트 추출

컴포넌트 합성과 반대로 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나누는 과정을 컴포넌트 추출이라 한다.

큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만든다.

WHY?

컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고, props도 단순해지기 때문에 다른 곳에서 사용할 확률이 높아진다. 재사용성이 올라감으로써 동시에 개발 속도도 향상된다.

⛳ 컴포넌트 추출 과정

[처만리]책162page 참고

Comment 컴포넌트가 UserInfon 컴포넌트를 포함하고 UserInfo 컴포넌트가 Avatar 컴포넌트를 포함하고 있는 구조이다.

컴포넌트를 어느 정도 수준까지 추출하는 것이 좋은지에 대해 정해진 기준은 없지만

기능 단위로 구분하는 것이 좋고, 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋다.