처음 만난 리액트 - 14. Composition 방법(Containment,Specialization)과 Inheritance

컴포지션과 inheritance(상속)은 둘 다 리액트 컴포넌트를 구성하는 방법 중 하나이다.

상속은 실제로 많이 사용되지 않으므로 컴포지션에 대해서만 알아보자.

 

Composition

: 합성. 여러개의 컴포넌트들을 묶어서 사용한 것.

그렇다면 여러개의 컴포넌트들을 어떻게 조합할 것인가?

 

조합 방법에 따라 컴포지션의 사용 기법이 나뉘는데 대표적인 컴포지션 사용 기법에 대해서 알아보자.

Composition - Containment

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

사이드바나 다이얼로그 같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.

(해당 컴포넌트를 사용하는 개발자가 어떤 것을 넣느냐에 따라 하위 컴포넌트가 달라지기 때문에)

따라서 이런 경우 컨테인먼트 방법을 사용하여 컴포지션을 사용한다.

 

컨테인먼트를 사용하는 방법 : props에 들어있는 children 속성 사용

props.children을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어오게 된다.

위 코드에서 결과적으로 Fancy Border 컴포넌트는 자신의 하위 컴포넌트를 모두 포함하여 예쁜 테두리로 감싸주는 컴포넌트가 된다.

 

 

실제로 Fancy Border 컴포넌트를 사용하는 예제를 보면,

fancy-border 컴포넌트로 감싸진 부분 안에 있는 h1 태그와 p 태그 이렇게 두 개의 태그는

모두 fancy-border 컴포넌트에 children이라는 이름의 props로 전달된다

(결과적으로 파란색의 테두리로 모두 감싸지는 결과가 나온다)

 

그렇다면 여러 개의 children 집합이 필요한 경우는 어떻게 해야 할까?

이런 경우에는 별도로 props를 정의해서 각각 원하는 컴포넌트를 넣어주면 된다.

 

 

Composition - Specialization

: 범용적인 개념이 구별이 되게 구체화 하는 것

 

위 코드와 같이 다이얼로그라는 범용적인 의미를 가진 컴포넌트가 나오고, 

그리고 이 다이얼로그 컴포넌트를 사용하는 웰컴 다이얼로그 컴포넌트가 나온다.

 

다이얼로그의 타이틀과 메세지를 어떻게 사용하냐에 따라 인사 다이얼로그가 될 수도 있고 경고 다이얼로그가 될수도 있다.

이 예시는 웰컴 다이얼로그를 만들어 인사말로 구체화시킨 경우이다.