11. 리액트 Composition vs Inheritance

Composition 방법과 Inheritance

Composition이란 리액트에서 "합성"을 뜻한다.

컴포넌트를 여러 개 합성해서 화면을 구성하기에 알아두어야 하는 방법이다.

이때 여러 방법으로 컴포넌트를 구성할 수 있다.

---

Containment

리액트에서 하위 컴포넌트를 포함하는 방식을 말한다.

코드를 살짝 보자.

앞에서 props 정의할 때 엘리먼트에서 자식 요소를 다룬 적이 있다.

자식 요소에 props를 정의해 주면 같이 props를 쓸 수 있다.

만일 여러 개의 자식 요소가 필요하다면 props를 여러 개 정의하면 된다.

예시로 다음과 같이 사용할 수 있다.

Specialization

기존의 객체 지향에서는 상속을 이용해서 구현하게 된다. 그러나 리액트에서는 다른 방향으로 구현하게 된다.

(단어 뜻은 "전문화"이다.)

웰컴 다이어로그가 더 큰 범위이다. 하위 컴포넌트는 다이어로그이다.

물론 둘 다 동시에 사용하는 것도 가능하다.

왼쪽은 다이어로그 컴포넌트(함수형)이다.

밑에 보면 props에 자식요소를 기재한다.

이후 다이어로그 태그를 작성, 타이틀과 메시지를 만들어준다. (이 방법이 Specialization이다.)

밑에는 input 태그를 이용해서 값을 받아준다. (이 방법이 Containment이다.)

Inheritance

단어의 뜻은 "상속"이다.

객체 지향 프로그램에서 정말 많이 들은 개념일 것이다.

리액트에서는 다른 컴포넌트에서 상속을 받아서 새로운 컴포넌트를 만드는 것이다.

그래서 앞서 소개한 Containment를 사용해서 여러 개의 컴포넌트를 만드는 것을 추천한다.

---

(실습) Card 컴포넌트 만들기

먼저 카드 컴포넌트를 만든다.

카드 컴포넌트의 props는 타이틀, 백그라운드 색깔, 자식요소를 가지고 있다.

엘리먼트 배울 때 타입, 프랍스, 자식요소를 가진다고 배웠다. 코드를 보면 비슷한 구석이 있음을 발견할 수 있다.

이후 div 태그를 만든다. div 안에는 스타일링이 들어가 있다. (이 부분은 뒤에서 아주 자세하게 배운다.)

div 태그는 title과 children으로 감싸져 있다.

다음은 프로카드 컴포넌트이다. 화면에 표시할 코드이다.

먼저 카드 컴포넌트를 임포트 해서 가져와준다.

이후 프로카드 컴포넌트는 카드의 타이틀과 백그라운드(컬러는 그린)을 가져온다.

화면은 다음과 같이 브라우저에서 열린다.

이러면 프로 카드의 카드 태그를 수정해 주면 전체적인 카드 컴포넌트의 틀은 유지가 된다.

계속 리액트에서 강조하지만, 리액트에서는 "재사용성"을 중요하게 생각한다.

결론

아주 큰 틀의 함수부터 기능을 완성해 주고,

그 안에 props를 이용해서 다양한 붕어빵을 만들면 된다. (고로 처음 만드는 붕어빵 틀인 "컴포넌트"가 굉장히 중요하다.)