[REACT] 거대한 컴포넌트를 작은 컴포넌트로 쪼개보자

거대한 컴포넌트. 분리작업이 필요하다

이와 같은 Comment 컴포넌트가 있다. 컴포넌트 내에서 쓰인 UserInfo나 Avatar는 재사용되기 힘들다.

다음과 같이 작게 쪼개보자

 

 

Avatar컴포넌트를 분리했다.

먼저 Avatar 컴포넌트부터 분리해냈다.

 

좀 더 일반적이고 Avatar 관점에서 바라봤을 때 어울리는 이름으로 바꿔보자.

{props.author...} => {props.user...}

 

 

이제 UserInfo도 분리해보자.

 

Avatar컴포넌트에 이어 UserInfo컴포넌트 또한 분리시켜줬다.

UserInfo컴포넌트에 Avatar가 사용되므로 

UserInfo컴포넌트에 Avatar를 포함시켜준다. 

 

이제 UserInfo와 Avatar는 재사용 가능한 컴포넌트가 됐다.