리액트에서 컴포넌트를 어떻게 구성하는 지에 대해서

Composition방식 / Inheritance방식에 대해 확인

Composition방식 (구성)

여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 의미한다.

그래서 합성이라는 뜻에 더 가깝다.

Untitled

이렇게 두개의 컴포넌트가 반복적으로 나와서 하나의 거대한 컴포넌트를 구성하게 된다.

이렇게 여러개의 컴포넌트를 합쳐서 하나의 컴포넌트를 생성하는 것

이러한 컴포지션은 리액트에서 많이 사용하는 방식이다.

결국 Composition방식 / Inheritance방식 이 두가지 방식은 여러개의 컴포넌트들을 어떻게 조합할 것인 지 구별하는 방식이다.

Composition의 방식 중 하나가 Containment가 존재한다.

방지 변제를 의미하는 단어지만 여기서는 contain의 의미가 더 강하다

의미대로 담다,포함하다를 의미하며

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

Untitled

동일한 sidebar를 사용하는 사이트가 있다고 했을 때 sidebar 컴포넌트 입장에서는 하위에 어떤 데이터가 올 지 알 수 없다. 해당 컴포넌트를 사용하는 개발자가 하위에 어떤 컴포넌트를 넣는 지에 따라 달라진다. 이럴 때는 Containment방식을 이용하여 컴포지션을 하게 된다

결국

Untitled

prop를 통해 조합한다.