[React] Card 컴포넌트 제작 (Composition VS Inheritance)

[React] Card 컴포넌트 제작

Card,jsx

• 카드 컴포넌트는 하위 컴포넌트를 감싸서 카드 형태를 보여주는 컴포넌트
• 두 가지 합성 방법을 모두 사용하여 구현
• children을 사용한 부분이 containment 이고 title과 background를 사용한 부분이 specialization이라고 할 수 있음
• 카드 컴포넌트는 범용적으로 재사용이 가능한 컴포넌트

ProfileCard.jsx

• 프로필 카드 컴포넌트는 카드 컴포넌트를 사용하여 타이틀에 이름을 넣고 배경 색상을 녹색으로 설정
• children으로는 간단한 소개 글을 넣었음
• 카드 컴포넌트가 사용자의 프로필을 나타내는 프로필 카드 컴포넌트가 됨

• 배경색이나 타이틀 그리고 내부에 들어가는 컨텐츠들을 바꿔 보면서 다양한 카드를 만들어보는 것이 좋음

 

복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 컴포넌트들을 조합해서 새로운 컴포넌트를 만들자

📱Composition

• 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것
• 구성의 의미보다는 합성의 의미에 더 가까움
• 여러 개의 컴포넌트들을 어떻게 조합할 건가에 대한 생각이 필요

📱Containment

• 하위 컴포넌트를 포함하는 형태의 합성 방법
• sidebar나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없음
• 사용하는 방법은 React 컴포넌트의 props에 기본적으로 들어있는 children 속성 사용

function FancyBorder(props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    );
}

• chlidren이라는 props은 개발자가 직접 넣어주는 것이 아니라 React에서 기본적으로 제공해주는 것
• 여러 개의 하위 컴포넌트를 가질 수 있음
• React에서는 하위 컴포넌트를 props.children으로 하나로 모아서 제공해 줌
• 여러 개의 children 집합이 필요할 때는 별도로 props를 정의해서 각각 원하는 컴포넌트를 정의하면 됨

📱Specialization

• 범용적인 개념을 구별이 되게 구체화 하는 것
• 기존의 객체지향 언어에서는 상속을 사용하여 Specialization을 구현
• React에서는 컴포지션을 사용하여 Spacialization을 구현
• 범용적으로 쓸 수 있는 컴포넌트를 만들어 놓고 특수화 시켜서 컴포넌트를 사용하는 컴포지션 방법

📱Inheritance

• 상속이라는 뜻을 가지고 있음
• 프로그래밍에서의 상속은 객체지향 프로그래밍에서 나온 개념
• 부모 클래스를 상속받아서 새로운 자식 클래스를 만든다는 개념으로 자식 클래스는 부모 클래스가 가진 변수나 함수 등의 속성을 모두 갖게 됨
• React는 다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것을 고려할 수 있음

 

공부한 자료

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A% B8/dashboard

[지금 무료] 처음 만난 리액트(React) 강의 | Inje Lee (소플) - 인프런