아까 까지 배웠던 합성에 대비되는 개념으로 상속이 있음. 컴퓨터 프로그래밍에서의 상속은 객체지향 프로그래밍에서 나온 개념인데 이건 부모 클래스를 상속받아서 새로운 자식 클래스를 만든다는 개념으로 자식 클래스는 부모 클래스가 가진 변수나 함수 등의 속성을 모두 갖게됨.

 

리액트에서는 다른 컴포넌트로부터 상속받아서 새로운 컴포넌트를 만드는 것을 고려해 볼 수 있음!

리액트 개발한 메타는 수천개의 리액트 컴포넌트를 사용한 경험을 바탕으로 추천할 만한 상속 기반의 컴포넌트를 찾아보려했으나 그러지 못함! -> 상속을 사용하는것보다 합성을 사용해서 개발하는게 더 좋은 방법임!

 

복잡한 컴포넌트 쪼개서 여러개의 컴포넌트 만들고, 만든 컴포넌트들 조합하여 새로운 컴포넌트를 만드는게 best

 

그렇다면 이제 합성방법을 사용해서 직접 한번 컴포넌트들을 만들어보자

 

이 컴포넌트는 하위 컴포넌트를 감싸서 카드형태로 보여주는 컴포넌트임

containment와 specialization 합성방법을 모두 사용하여 구현

children을 사용한 부분이 containment, title과 background를 사용한 부분이 specialization

이 범용적으로 재사용이 가능한 컴포넌트를 사용하여 프로필카드 컴포넌트를 만들어볼거임.

이렇게 간단하게 만들기 가능!

이 프로필카드 컴포넌트는 카드 컴포넌트를 이용하여 title과 backgroundColor을 설정하고 children에 간단한 소개글을 작성함으로써 사용자의 프로필을 나타내는 컴포넌트 완성됨.

 

간단하게 정리해보자면

리액트는 복잡한 컴포넌트를 쪼개서 여러개의 재사용이 가능한 컴포넌트로 만드는 것이 중요하고 이 컴포넌트들을 잘 조합하여서 새로운 컴포넌트를 만들면됌.

합성이란 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는것이고, 다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있음.

이러한 합성 기법에는 containment(하위 컴포넌트를 포함하는 형태의 합성방법, 리액트 컴포넌트의 props에 기본적으로 들어가있는 children속성 사용, 여러개의 children집합이 필요한 경우 별도로 props를 각각 정의해서 사용)

specialization(

+ Recent posts