Spread Attributes.

The spread operator is one of the coolest additions to the JavaScript language. Thanks to the spread operator, which is represented by three dots. Common operations that previously required a bit more code like cloning an object or array are now so much simpler. So in this video you will learn how to use the spread operator and objects, how to spread native properties to DOM components. How to design flexible components and about the caveats when using the spread operator. Imagine that the little lemon restaurant wants to have a simple welcome screen where users can sign up or log in depending on whether they have an account or not. The sign up and log in buttons are in nature very similar with differences in the text and the action taken when they're clicked. To achieve this implementation, you could define a button component that encapsulates the native HTML button element and uses the same props as its native counterpart. However, a button presents dozens of different properties for customization. Instead of having to specify each of them manually, the spread operator can be used to forward all of them without typing each one manually. React embraces this operator at its core when it comes to props. But before digging deeper, let's refresh with this operator enables for objects in pure JavaScript. The spread operator can be applied to different data types in JavaScript such as arrays, objects and even strings. Since react props are just objects, this lesson is going to be focused strictly on the object type. Copying and merging objects are the two main operations you may perform with these operators. For a simple copy of an object, this is the syntax required curly braces and the three dots preceding the object to copy. In this example, order amend represents a last minute change to the type of pizza ordered by the customer. For merging first you need to spread the properties from the original object and then provide the new properties to be added or to replace original properties. The property called item has been replaced with the new order information. Great, now that the preliminaries are covered, let's explore how react uses the spread operator. This order list component example renders an order component. Each order component expects four props an ID, user name, item and price. This first example shows how you might usually do it, passing all the props in the return statement explicitly. However, this can be simplified if you already have the props your order component needs in an object. Here, you can see that only the spread operator is required in the return statement, saving us time by just spreading all the props and avoiding having to type them manually. This pattern allows you to create flexible components but there are also some caveats you need to keep in mind when using the syntax. Let's explore this in more detail with an example demonstration. In this application, I have created a simple welcome screen for little lemon restaurant where users are able to sign up or log in depending on whether they have an account or not. At the top, I have to find a button component that wraps the native button from the DOM. This component expects the same props as its native counterpart with the addition of the type prop, which is a custom prop that determines the background of the button based on the theme provided. Here is a clear example of using the spread operator to group all the props that belong to the native button and explicitly extract the custom props I have defined for this component and our react specific, type and Children. This implementation is clean for developers since they can provide all the props a native button would expect. The second example is a login button component that renders the custom button component I have created itself. This login button does some pre-configuration by fixating some of the props from the button component in this case type and on click while still passing the native button props down with the spread operator. Now the app component renders the two buttons and uses the button component for the sign up and the login button component for login. The buttons are both configured here to send the user to the sign up page, unless they have an account in which case the login button components original on click function will send them to the login page. I have also provided both with an on click handler to show an alert about the intended action when the button is pressed. However, observe how I have mistakenly provided the same alert message that is used for sign up on the login button component. Hence, overriding the on click handler that the login button already defines. Now, can you guess what the message of the alert will be when I click on it, I'll give you a few seconds to think about it.
Play video starting at :5:7 and follow transcript5:07
Well, if you guessed logging in, you guessed right. The reason is that, even though I have overridden the on click prop in the log in button component, its implementation is done in a way that prevents that overriding from happening. Why is that because of the order of the spread operator? If I go ahead and spread the props at the end instead right after on click. The behavior is different and signing up is output instead.
Play video starting at :5:36 and follow transcript5:36
So what are the main takeaways from this lesson? The spread operator is a great tool that enables the creation of more flexible components, especially when forwarding props automatically to other components that expect them as well as providing your consumers with a nice component. API. However, keep in mind that depending on the order of the spread, the behavior may differ so you need to be conscious about your decision when it comes to component design. In the example of the login button before it may make sense to prevent the override of the on click property but it may not be the intended case for other props. Well done. I hope you're getting an idea of the multiple benefits that can be gained from using these react tools.
스프레드 속성.

스프레드 연산자는 자바스크립트 언어에 추가된 가장 멋진 기능 중 하나입니다. 점 3개로 표시되는 스프레드 연산자 덕분입니다. 이전에는 객체나 배열을 복제하는 등 조금 더 많은 코드가 필요했던 일반적인 작업이 이제 훨씬 더 간단해졌습니다. 이 동영상에서는 스프레드 연산자와 객체를 사용하는 방법, 네이티브 프로퍼티를 DOM 컴포넌트에 스프레드하는 방법을 알아봅니다. 유연한 컴포넌트를 디자인하는 방법과 스프레드 연산자를 사용할 때 주의할 점에 대해서도 설명합니다. 리틀 레몬 레스토랑에서 사용자가 계정 보유 여부에 따라 가입하거나 로그인할 수 있는 간단한 환영 화면을 만들고 싶다고 가정해 보겠습니다. 가입 버튼과 로그인 버튼은 텍스트와 클릭 시 수행되는 작업의 차이만 있을 뿐 본질적으로 매우 유사합니다. 이러한 구현을 달성하기 위해 네이티브 HTML 버튼 요소를 캡슐화하고 네이티브와 동일한 소품을 사용하는 버튼 컴포넌트를 정의할 수 있습니다. 그러나 버튼에는 사용자 정의할 수 있는 수십 가지 속성이 있습니다. 각각의 프로퍼티를 수동으로 지정하는 대신 스프레드 연산자를 사용하면 프로퍼티를 일일이 입력하지 않고도 모든 프로퍼티를 전달할 수 있습니다. React는 소품과 관련하여 이 연산자를 핵심으로 사용합니다. 하지만 더 깊이 파고들기 전에 순수 자바스크립트의 객체에 대해 이 연산자가 활성화된 것을 다시 한 번 살펴봅시다. 스프레드 연산자는 배열, 객체, 심지어 문자열과 같은 자바스크립트의 다양한 데이터 타입에 적용할 수 있습니다. 리액트 소품은 객체이므로 이번 강의에서는 객체 유형에만 집중하겠습니다. 객체 복사 및 병합은 이러한 연산자로 수행할 수 있는 두 가지 주요 작업입니다. 개체를 간단하게 복사하는 경우 중괄호와 복사할 개체 앞에 점 세 개가 필요한 구문입니다. 이 예에서 주문 수정은 고객이 주문한 피자 종류를 마지막 순간에 변경하는 것을 나타냅니다. 병합하려면 먼저 원래 개체에서 속성을 펼친 다음 추가하거나 원래 속성을 대체할 새 속성을 제공해야 합니다. item이라는 속성이 새 주문 정보로 대체되었습니다. 좋아요, 이제 예제는 끝났으니 이제 반응이 스프레드 연산자를 어떻게 사용하는지 살펴보겠습니다. 이 주문 목록 컴포넌트 예제는 주문 컴포넌트를 렌더링합니다. 각 주문 컴포넌트에는 ID, 사용자 이름, 아이템, 가격의 네 가지 프로퍼티가 필요합니다. 이 첫 번째 예시는 반환문에서 모든 프로퍼티를 명시적으로 전달하는 일반적인 방법을 보여줍니다. 그러나 주문 컴포넌트에 필요한 프로퍼티를 객체에 이미 가지고 있다면 이 과정을 단순화할 수 있습니다. 여기에서는 반환 문에 스프레드 연산자만 필요하므로 모든 프로퍼티를 수동으로 입력할 필요 없이 스프레드만 하면 되므로 시간을 절약할 수 있습니다. 이 패턴을 사용하면 유연한 컴포넌트를 만들 수 있지만 구문을 사용할 때 염두에 두어야 할 몇 가지 주의 사항도 있습니다. 데모 예시를 통해 이를 더 자세히 살펴보겠습니다. 이 애플리케이션에서는 사용자가 계정 보유 여부에 따라 가입하거나 로그인할 수 있는 리틀 레몬 레스토랑의 간단한 시작 화면을 만들었습니다. 맨 위에는 DOM에서 네이티브 버튼을 감싸는 버튼 컴포넌트를 찾아야 합니다. 이 컴포넌트는 제공된 테마에 따라 버튼의 배경을 결정하는 사용자 정의 소품인 유형 소품이 추가되어 네이티브 소품과 동일한 소품을 기대합니다. 다음은 스프레드 연산자를 사용하여 네이티브 버튼에 속하는 모든 prop을 그룹화하고 이 컴포넌트와 리액트 특정, type 및 자식에 대해 정의한 커스텀 prop을 명시적으로 추출하는 명확한 예시입니다. 이 구현은 네이티브 버튼에서 기대할 수 있는 모든 프로퍼티를 제공할 수 있기 때문에 개발자에게 깔끔합니다. 두 번째 예시는 제가 직접 만든 사용자 정의 버튼 컴포넌트를 렌더링하는 로그인 버튼 컴포넌트입니다. 이 로그인 버튼은 스프레드 연산자를 사용하여 네이티브 버튼 소품을 전달하면서 이 경우 유형과 클릭 시 버튼 컴포넌트의 일부 소품을 고정하여 몇 가지 사전 구성을 수행합니다. 이제 앱 컴포넌트는 두 개의 버튼을 렌더링하고 가입에는 버튼 컴포넌트를, 로그인에는 로그인 버튼 컴포넌트를 사용합니다. 여기서 두 버튼은 모두 사용자를 가입 페이지로 보내도록 구성되었지만, 계정이 없는 경우 원래의 클릭 시 로그인 버튼 컴포넌트가 사용자를 로그인 페이지로 보내도록 구성되었습니다. 또한 버튼을 눌렀을 때 의도한 동작에 대한 경고를 표시하는 온클릭 핸들러를 둘 다 제공했습니다. 그러나 로그인 버튼 컴포넌트에서 가입에 사용되는 것과 동일한 경고 메시지를 실수로 제공한 것을 관찰하십시오. 따라서 로그인 버튼이 이미 정의한 클릭 핸들러를 재정의합니다. 이제 제가 클릭했을 때 어떤 경고 메시지가 표시될지 짐작하실 수 있으신가요? 잠시 생각할 시간을 드리겠습니다.
5:7에서 시작하는 비디오 재생 및 대본 따라하기5:07
로그인을 짐작하셨다면 맞으셨습니다. 그 이유는 제가 비록 제가