Video #2 - Manipulating children dynamically in JSX

React children is one of the special props all your components have implicitly that along with the react composition model, enables a new paradigm of component design. So far you have discovered how to leverage this special prop in read mode only, meaning that your components consume it as it is provided. But what if I told you that you can go even further and transform your children's elements in any way, shape, or form. To illustrate, see the Little Lemon restaurant once a way to visualize a summary of live orders as they come in from customers. What would be really useful for the chefs working in the kitchen is to display each customer order in its own separate row with the name of the dishes, the amount of each dish, the total price, the time of submission, and the full name of the customer. Well, by using a set of new react APIs that will enhance your component design skills, you will be able to solve this problem for Little Lemon with a smart and efficient solution. Let's start by exploring two of these powerful react APIs. React.cloneElement and react.children. In this video, you'll learn how to use both of these react APIs and how they can be used to manipulate the Render Output dynamically. Let's explore the first of these APIs, React.cloneElement in more detail. This is part of the react top-level API and it's used to manipulate and transform elements. Top-level API refers to the way you would import those functions from the react package. You can either import react as a global object and the top of your file and access them as methods on that object. Or alternatively as a named import. Recall that elements are just plain JavaScript objects. The react uses internally to describe what you want to appear on the screen. React.cloneElement effectively clones and returns a new copy of a provided element. The first argument is the react element you would like to clone, and the second argument is the prompts that will be added and merged with the original props passed into the component. Remember that prompts in react are immutable objects. You must create a copy of the element first and perform the transformation in the copy. That's exactly what React.cloneElement allows you to achieve. This API is useful to allow a parent to perform the following operations; modify children properties, add to children properties and extend the functionality of children components. For example you could add another prop dynamically to the submit button element illustrated before. Another important top-level API useful for children manipulation is react.children, which provides utilities for dealing with the props.children data structure. The most important method is the map function. React.children.map is very similar to the map function from arrays and invokes a function in every child contained within its children prop, performing a transformation and returning a new element. Don't worry if those APIs still sound a bit confusing. Let's get into some code to give you a better picture. The Little Lemon restaurant is busy receiving live orders. To visualize a summary of those orders, I have been tasked to display each one of them in a row, having a fixed horizontal spacing between each piece of key information. In this application, there is an order that has been submitted for a client requesting a pizza margherita. Each order contains the name of the dish, amount, total price, time of submission, and full name of the client. I have created a row component that will handle the separation per item. At the moment, it just returns the children as they are provided. All the items on screen or cramped with no separation. Let's go ahead and use both React.cloneElement and React.children.map as the implementation to solve the separation problem. The first thing I'll do is use the children.map function to iterate through each child.
Play video starting at :4:19 and follow transcript4:19
So far, I am returning each child as it is, so still no changes on the screen. To implement even horizontal spacing. I am going to add some custom style that will set some left margin in each child except for the first one. In order to specify the amount of space, I will create a new prop called spacing. There will be the number of pixels and we'll use string interpolation to set the margin style properly in pixels. Now that the style is defined, I need to attach it as the style prop in each element. In the map function callback, I'll return a new copy of the element using React.cloneElement. The second argument is what lets you specify the new props. In this case, I'd like to add a new style prop that will merge the previous style.
동영상 #2 - JSX에서 동적으로 자식 조작하기

React 자식은 모든 컴포넌트에 암시적으로 존재하는 특별한 소품 중 하나로, React 컴포지션 모델과 함께 새로운 패러다임의 컴포넌트 디자인을 가능하게 합니다. 지금까지 이 특별한 소품을 읽기 모드에서만 활용하는 방법, 즉 컴포넌트가 제공된 대로 사용하는 방법에 대해 알아봤습니다. 하지만 여기서 더 나아가 어린이용 요소를 어떤 방식, 모양, 형태로든 변형할 수 있다고 말씀드리면 어떨까요? 예를 들어, 리틀 레몬 레스토랑에서 고객으로부터 들어오는 실시간 주문의 요약을 시각화하는 방법을 한 번 살펴보겠습니다. 주방에서 일하는 셰프에게 정말 유용한 것은 각 고객 주문을 요리 이름, 각 요리의 양, 총 가격, 제출 시간 및 고객의 전체 이름과 함께 별도의 행에 표시하는 것입니다. 컴포넌트 디자인 기술을 향상시켜줄 새로운 리액트 API 세트를 사용하면 리틀 레몬의 이 문제를 스마트하고 효율적인 솔루션으로 해결할 수 있습니다. 먼저 이 두 가지 강력한 리액트 API를 살펴보겠습니다. React.cloneElement와 react.children입니다. 이 비디오에서는 이 두 가지 반응 API를 사용하는 방법과 렌더링 출력을 동적으로 조작하는 데 사용하는 방법을 배웁니다. 이 중 첫 번째 API인 React.cloneElement를 더 자세히 살펴보겠습니다. 이것은 React 최상위 API의 일부이며 엘리먼트를 조작하고 변형하는 데 사용됩니다. 최상위 API는 react 패키지에서 해당 함수를 가져오는 방식을 의미합니다. 리액트를 전역 객체와 파일 상단으로 가져와서 해당 객체의 메서드로 액세스할 수 있습니다. 또는 네임드 임포트로 임포트할 수도 있습니다. 엘리먼트는 그냥 평범한 자바스크립트 객체라는 점을 기억하세요. 반응은 내부적으로 화면에 표시할 내용을 설명하는 데 사용합니다. React.cloneElement는 제공된 엘리먼트의 새 복사본을 효과적으로 복제하고 반환합니다. 첫 번째 인수는 복제하려는 반응 엘리먼트이고, 두 번째 인수는 컴포넌트에 전달된 원래 프롭에 추가되고 병합될 프롬프트입니다. 리액트에서 프롬프트는 불변 객체라는 것을 기억하세요. 먼저 엘리먼트의 복사본을 만들고 복사본에서 변환을 수행해야 합니다. 이것이 바로 React.cloneElement를 통해 달성할 수 있는 것입니다. 이 API는 부모가 자식 프로퍼티 수정, 자식 프로퍼티에 추가, 자식 컴포넌트의 기능 확장 등의 작업을 수행할 수 있도록 하는 데 유용합니다. 예를 들어 앞서 설명한 제출 버튼 요소에 다른 소품을 동적으로 추가할 수 있습니다. 자식 조작에 유용한 또 다른 중요한 최상위 API는 props.children 데이터 구조를 처리하기 위한 유틸리티를 제공하는 react.children입니다. 가장 중요한 방법은 지도 함수입니다. React.children.map은 배열의 map 함수와 매우 유사하며, 자식 프로퍼티에 포함된 모든 자식에 함수를 호출하여 변환을 수행하고 새로운 엘리먼트를 반환합니다. 이러한 API가 여전히 약간 혼란스럽게 들리더라도 걱정하지 마세요. 더 나은 이해를 돕기 위해 몇 가지 코드를 살펴보겠습니다. 리틀 레몬 레스토랑은 실시간 주문을 받느라 바쁩니다. 이러한 주문의 요약을 시각화하기 위해 각 주요 정보 사이에 가로 간격을 고정하여 각 주문을 일렬로 표시하는 작업을 수행해야 합니다. 이 애플리케이션에는 피자 마르게리타를 요청하는 고객이 제출한 주문이 있습니다. 각 주문에는 요리 이름, 금액, 총 가격, 제출 시간 및 고객의 전체 이름이 포함됩니다. 항목별 구분을 처리할 행 컴포넌트를 만들었습니다. 현재로서는 제공된 대로 아이들을 반환합니다. 모든 항목이 화면에 표시되거나 분리되지 않고 비좁습니다. 분리 문제를 해결하기 위한 구현으로 React.cloneElement와 React.children.map을 모두 사용해 보겠습니다. 먼저 children.map 함수를 사용해 각 자식을 반복해 보겠습니다.
4:19에서 시작하는 비디오 재생 및 대본 따라하기4:19
지금까지는 각 자식을 그대로 반환하고 있으므로 화면에 아무런 변화가 없습니다. 수평 간격을 균일하게 구현하기 위해 첫 번째 자식을 제외한 각 자식에 약간의 왼쪽 여백을 설정하는 사용자 지정 스타일을 추가하겠습니다. 여백의 양을 지정하기 위해 간격이라는 새로운 소품을 만들겠습니다. 픽셀 수와 문자열 보간을 사용하여 여백 스타일을 픽셀 단위로 적절하게 설정하겠습니다. 이제 스타일이 정의되었으므로 각 요소에 스타일 프로퍼티로 첨부해야 합니다. map 함수 콜백에서 React.cloneElement를 사용해 엘리먼트의 새 복사본을 반환할 것입니다. 두 번째 인수는 새 프로퍼티를 지정할 수 있는 인자입니다. 이 경우 이전 스타일을 병합하는 새 스타일 프로퍼티를 추가하고 싶습니다.