When designing React components, one of the most important properties developers tend to overlook is the children prop. The children prop which is a special property all components have, is the foundation for the React powerful composition model. Say the Little Lemon restaurant wants to enable users to have accounts on their app, this would mean processes would need to be built to create, manage, and delete accounts in the app. These types of processes can be constructed simply and efficiently using component composition with children. In this video, you will learn why component composition is so important and how to effectively use and appreciate the children prop. You will also learn about two key features of composition, and you'll explore some practical examples that will help you understand how you can leverage it so your components are more robust and reusable. There are two main features that enable component composition; containment and specialization. Let's break down these two main features now starting with containment. Containment refers to the fact that some components don't know their children ahead of time. This is especially common for components like a sidebar or a dialog, where they delimit a specific area in your UI to contain other elements. You can think of them also as generic boxes. In case you don't know, a dialog is a type of modal window where the rest of the UI is disabled until the modal is addressed and interacted with. For these component boxes, the recommended approach is to use the children prop to pass children elements directly as their content. Let's explore this with a dialog example. Here you have a dialog component which acts as the box, taking care of styling the container to make it look like a modal window. By using the children prop, it has become a generic component to which we can provide any valid JSX as children. To illustrate that, the confirmation dialog component has been defined, which uses the dialog component and renders as children a title and a description. This example also showcases the second feature of component composition, specialization. Specialization defines components as being special cases of other components. In this example, the confirmation dialog is a special case of dialog. Now that you are familiar with the basics of component composition, let's go ahead and code an application to demonstrate what you've learned. This application has been created with Create React app. Imagine Little Lemon would like to offer an easy way for their users to delete their account if they want to, the goal is to build a generic dialog component that will contain a title, a description, and a warning button to make sure users are aware of the action's consequences all using component composition. I have already created two generic components, a button and an alert. The button uses the children prop to specify its text, and the alert is a generic box that renders an overlay in the background and a white modal in the center of the screen. The children prop determines the content of that modal. The first step is to create a warning button using the specialization feature of component composition. For that, I'll define a new component named delete button, where I'll render the button component and configure its properties to have a red color and the text delete. Then I'll go ahead and render the alert component.
Play video starting at :3:34 and follow transcript3:34
As it stands, it's just a generic white box or container. This illustrates the second feature of component composition which is containment. I can customize the content of the box in any way I would like by just providing JSX as its children. To fulfill the requirements of Little Lemon, I'll create a header titled delete account, as well as a paragraph to inform the user about the action. I want to state clearly that they will miss out on the chef's delicious recipes if they delete their account, so I'll reflect that in the description. Finally, the last piece is to render the delete button as defined previously. That wraps it up. In this video, you have learned about a React technique called component composition and why it is so important. You also learned how to embrace the two key features of composition; containment and specialization. You've explored some practical examples that helps you to create components that are more robust and reusable using the special children prop.
React 컴포넌트를 디자인할 때 개발자가 간과하기 쉬운 가장 중요한 속성 중 하나는 자식 프로퍼티입니다. 모든 컴포넌트가 가지고 있는 특별한 속성인 자식 프로퍼티는 React의 강력한 컴포지션 모델의 기초입니다. 리틀 레몬 레스토랑에서 사용자가 앱에서 계정을 가질 수 있도록 하려면 앱에서 계정을 생성, 관리, 삭제하는 프로세스를 구축해야 합니다. 이러한 유형의 프로세스는 컴포넌트 컴포지션을 사용하여 간단하고 효율적으로 구축할 수 있습니다. 이 비디오에서는 컴포넌트 구성이 중요한 이유와 어린이 소품을 효과적으로 사용하고 감상하는 방법에 대해 알아봅니다. 또한 컴포넌트 컴포지션의 두 가지 주요 기능에 대해 알아보고, 컴포넌트 컴포지션을 활용하여 컴포넌트를 더욱 견고하고 재사용 가능하게 만드는 방법을 이해하는 데 도움이 되는 몇 가지 실용적인 예제를 살펴볼 것입니다. 컴포넌트 컴포지션을 가능하게 하는 두 가지 주요 기능은 봉쇄와 전문화입니다. 이제 이 두 가지 주요 기능을 격리부터 살펴보겠습니다. 봉쇄는 일부 컴포넌트가 자신의 자식을 미리 알지 못한다는 사실을 의미합니다. 이는 특히 사이드바나 대화 상자와 같은 컴포넌트에서 흔히 볼 수 있으며, UI의 특정 영역을 구분하여 다른 요소를 포함하도록 합니다. 일반적인 상자라고 생각하면 됩니다. 잘 모르시는 분들을 위해 설명하자면, 대화 상자는 일종의 모달 창으로, 모달을 클릭하고 상호 작용할 때까지 나머지 UI가 비활성화됩니다. 이러한 컴포넌트 상자의 경우, 자식 프로퍼티를 사용하여 자식 요소를 콘텐츠로 직접 전달하는 것이 좋습니다. 대화 상자 예시를 통해 이를 살펴보겠습니다. 여기에는 상자 역할을 하는 대화 상자 컴포넌트가 있으며, 모달 창처럼 보이도록 컨테이너의 스타일을 관리합니다. 자식 프로퍼티를 사용함으로써, 유효한 JSX를 자식으로 제공할 수 있는 일반적인 컴포넌트가 되었습니다. 이를 설명하기 위해 대화 상자 컴포넌트를 사용하고 제목과 설명을 자식으로 렌더링하는 확인 대화 상자 컴포넌트가 정의되었습니다. 이 예시에서는 컴포넌트 구성의 두 번째 특징인 전문화도 보여줍니다. 전문화는 컴포넌트를 다른 컴포넌트의 특수한 경우로 정의합니다. 이 예제에서 확인 대화 상자는 대화 상자의 특수한 경우입니다. 이제 컴포넌트 구성의 기본 사항에 익숙해졌으므로 이제 배운 내용을 보여줄 애플리케이션을 코딩해 보겠습니다. 이 애플리케이션은 Create React 앱으로 만들었습니다. 사용자가 원할 경우 계정을 쉽게 삭제할 수 있는 방법을 제공하고자 하는 Little Lemon을 가정하고, 컴포넌트 컴포지션을 사용해 제목, 설명, 경고 버튼을 포함하는 일반적인 대화 상자 컴포넌트를 작성하여 사용자가 행동의 결과를 인지할 수 있도록 하는 것이 목표입니다. 이미 버튼과 경고라는 두 가지 일반 컴포넌트를 만들었습니다. 버튼은 자식 프로퍼티를 사용하여 텍스트를 지정하고 경고는 배경에 오버레이를 렌더링하고 화면 중앙에 흰색 모달을 렌더링하는 일반 상자입니다. 자식 소품은 해당 모달의 콘텐츠를 결정합니다. 첫 번째 단계는 컴포넌트 구성의 특수화 기능을 사용하여 경고 버튼을 만드는 것입니다. 이를 위해 삭제 버튼이라는 새 컴포넌트를 정의하고 버튼 컴포넌트를 렌더링하고 빨간색과 삭제 텍스트를 갖도록 속성을 구성하겠습니다. 그런 다음 경고 컴포넌트를 렌더링하겠습니다.3:34부터 비디오 재생 및 대본 따라하기3:34이 상태에서는 일반적인 흰색 상자 또는 컨테이너일 뿐입니다. 이것은 컴포넌트 구성의 두 번째 특징인 봉쇄를 보여줍니다. JSX를 자식으로 제공하기만 하면 상자의 콘텐츠를 원하는 방식으로 커스터마이징할 수 있습니다. Little Lemon의 요구 사항을 충족하기 위해 계정 삭제라는 제목의 헤더와 사용자에게 작업에 대해 알리는 단락을 만들겠습니다. 계정을 삭제하면 셰프의 맛있는 레시피를 놓칠 수 있다는 점을 명확히 알리고 싶어서 설명에 이를 반영하겠습니다. 마지막으로 앞서 정의한 대로 삭제 버튼을 렌더링합니다. 이것으로 마무리합니다. 이 영상을 통해 컴포넌트 컴포지션이라는 React 기법과 이것이 중요한 이유에 대해 배웠습니다. 또한 컴포넌트 컴포지션의 두 가지 핵심 기능인 함축과 전문화를 수용하는 방법도 배웠습니다. 특별한 어린이 소품을 사용해 더 강력하고 재사용 가능한 컴포넌트를 만드는 데 도움이 되는 몇 가지 실용적인 예제를 살펴봤습니다.