Component 합성과 추출

1. 개요

이번 장에서는 컴포넌트를 합치고 잘게 쪼개는 방법에 대해서 배우겠다. 아시다시피 React의 신념은 '레고처럼 조립' 이다. 여기서 레고의 역할을 하는 것이 컴포넌트이다. 그때 그때 입맛에 맞는 컴포넌트를 붙이고 떼고를 반복해서, 원하는 모양을 조립하면 된다. 그 레고를 붙이고 떼는 법을 배우자. 

2. Component 합성 

위와 같이 하나의 큰 컴포넌트를 만들기 위해 작은 컴포넌트들을 조합하는 행위를 컴포넌트 합성이라 한다. 예제에서는 하나의 컴포넌트를 여러번 썼지만, 각기 다른 컴포넌트를 합쳐도 된다. 

3. 컴포넌트 추출 

컴포넌트 추출은 너무 큰 컴포넌트를 재사용성을 위해서 여러 작은 컴포넌트로 잘게 쪼개는 작업을 의미한다. 큰 컴포넌트로 들어오는 props 중 일부를 다시 props로 받는 작은 컴포넌트를 만들어 코드의 일부를 대체한다. 

해당 아바타 만드는 곳이 다른 곳에서 쓰이기도 하고, 해당 Comment 컴포넌트가 너무 커서 잘게 쪼게 보려고 한다. 

이런식으로 하나 만들어서 

이렇게 대체하면 된다.