상속과 props Containment

상속은 extends 키워드를 사용해서 부모의 모든 속성과 메서드를 물려받는 방법이다. 상속은 부모와 자식간에 의존성이 강하게 결합되어있어서 유연함이 부족하므로 좋은 방법은 아니다.

페이스북 앱에서도 수천개의 컴포넌트를 사용하고 있지만 상속을 사용한 경우는 단 한번도 없고 Props 와 컴포지션을 사용하고 있다.

Q) 1. 아래 코드펜에서 상속을 사용하여 BlueButton 컴포넌트의 red 버튼을 #0078e7로 바꾸시오.

A) 생성자를 만들고 color를 아래와 같이 재정의한다.

Q) 2. 아래 코드펜에서 YellowButton 컴포넌트의 버튼 색깔을 #ffeb3b로 바구시오.

BlueButton 클래스는 InheritedButton 클래스를 상속 받았으므로 모든 속성과 메서드를 물려받는다. 그러므로 만일 BlueButton 클래스에 아무 것도 없으믄 어떻게 될까? color state는 부모의 속성을 그대로 물려받으므로 red로 보일것이다. 이 속성을 바꿀려면 생성자에서 다시 재 정의한다.

YelloButton은 React Element를 리턴시에 CompositedButton 컴포넌트를 포함하고 있다. color 를 바꾸기 위해서는 props로 값을 변경한다.

CodePen

See the Pen React Composition vs Inheritance example by LeeDongKee (@eastflag) on CodePen.default

children prop Containment

위의 예는 Yellow 컴포넌트가 CompositedButton 을 포함할때 props만 전달하였다. 이번에는 props.children을 전달해보자. React 의 createElement를 사용할때 세번째 파라메터가 나머지 연산자로 받는 children 이였다는것을 기억할 것이다.

Q) 1. 아래 코드펜에서 GoodbyeDialog 컴포넌트를 컴포지션을 사용하여 FancyBorder 컴포넌트의 border를 red로 바꾸고 title은 Goodbye, message는 See you later! 로 바꾸시오.

A) props와 children을 아래와 같이 추가한다.

Q) 2. WelcomeDialog와 GoodbyeDialog의 children의 제목과 메시지 부분은

WelcomeDialog와 GoodbyeDialog의 children의 제목과 메시지 부분이 각각 h1 태그와 p태그로 중복이다. FancyBorer 와 h1, p 태그를 갖는 Dialog 컴포넌트를 생성후 WelcomeDialog, GoodbyeDialog 컴포넌트는 Dialog 컴포넌트를 컴포지션하도록 변경하시오.

codepen

See the Pen react props children composition example by LeeDongKee (@eastflag) on CodePen.default

props가 react element 인 composition

Q) 아래 코드펜에서 App 컴포넌트에서 SplitPane 컴포넌트의 left, right 속성에 React Element를 넘겼다. SplitPane 컴포넌트를 완성하시오.

A) React Element를 자바스크립트 객체이다. 그러므로 props 로 넘기게 되면 reference type이므로 메모리 주소값이 넘어가게 된다. 받는쪽에서는 JSX express을 사용하여 {} 로 자바스크립트 객체를 받으면 된다.

codepen

See the Pen react props in case of react element composition example by LeeDongKee (@eastflag) on CodePen.default