728x90
상속
-
리액트 주요개념 - 합성 vs 상속IT/리액트 2022. 1. 16. 20:34
React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 많습니다. 특히 범용적인 박스 역할을 하는 Sidebar 또는 Dialog와 같은 컴포넌트에서 흔히 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력하여 그대로 전달하는 것이 좋습니다. function FancyBorder(props) { return ( {props.children} ) } 이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다. function WelcomeDialog(..