Compositon
- 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것
- 여러개의 컴포넌트를 어떻게 조합할 것인가를 생각하는게 중요
- Containment, Specialization 두가지 방법이 있다
Containment
- 하위 컴포넌트를 포함하는 합성 방법
- Sidebar나 Diglog같은 box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다
- props.children을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어옴
- 여러 개의 children 집합이 필요한 경우 별도로 props를 정의해 각각 원하는 컴포넌트를 넣어주면 된다
- splitPane : 화면을 왼쪽과 오른쪽으로 분할해서 보여주는 컴포넌트
Specialization
- 범용적인 개념을 구별이 되게 구체화 하는 것
- 범용적으로 쓸 수 있는 컴포넌트를 만들어놓고 이를 특수화 시켜서 사용하는 컴포지션 방법
Containment 와 Specialization 같이 사용하기
- input태그와 button태그는 props.children으로 전달되어 Dialog에 표시됨
Inheritance(상속)
- 컴포지션과 대비
- 다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것
- 컴포지션을 사용해 개발하는 것이 더 좋은 방법
결론
복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 컴포넌트들을 조합해서 새로운 컴포넌트를 만들자
