[React] 합성(Composition)과 상속(Inheritance)

 

1. 합성(Composition)

- 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것

- 다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있음 

 

2. 합성 기법 

 

1) Containment

- 하위 컴포넌트를 포함하는 형태의 합성 방법

- 리액트 컴포넌트의 props에 기본적으로 들어있는 children 속성을 사용

- 여러 개의 children 집합이 필요한 경우 별도로 props를 각각 정의해서 사용

 

2) Specialization

- 범용적인 개념을 구별되게 구체화하는 것

- 범용적으로 쓸 수 있는 컴포넌트를 만들어 놓고 이를 구체화시켜서 컴포넌트를 사용하는 합성 방법

 

3) Containment와 Specialization 

- props.children을 통해 하위 컴포넌트를 포함시키기(Containment)

- 별도의 props.chilren을 선언하여 구체화시키기(Specialization)

 

 

 

 

3. 상속(Inheritance)

- 다른 컴포넌트로부터 상속받아서 새로운 컴포넌트를 만드는 것

- 상속을 사용하여 컴포넌트를 만드는 것을 추천할 만한 사용 사례를 찾지 못함

- 리액트에서는 상속보다는 합성을 사용하는 것이 좋음