script:

Well done. You have reached the end of this module on react JSX advanced patterns and testing. Let's take a few minutes to review where you have learned so far. You began the module with an in depth lesson on JSX, you were presented with the distinction between components and elements. You learned that components are functions that take data or props as an input and return a tree of elements as output. You also learned that elements are just plain javascript objects that offer a lightweight representation of the dom and let react update your user interface in a fast and predictable way. Next you discovered the importance of component composition and the use of the children prop. You were introduced to containment and specialization. The two main properties that component composition has. You learn that containment is a technique that is applicable to components that don't know their children ahead of time. Like a dialogue or a sidebar and that it uses the special children prop two pass elements directly as their content. You were also introduced to specialization, a technique that allows you to define components of special cases of other components, like creating a confirmation dialog based on a dialogue. Then you moved on to a lesson about manipulating children dynamically in JSX. Here you were introduced to a couple of new react APIs, react dot clone element and react dot children. You learned that reactor dot clone element clones and returns a new element allowing you to manipulate and transform elements directly in your JSX. You also learned the react dot children dot map is useful for children manipulation and that when used in conjunction with react dot clone element enables a powerful composition model for creating flexible components. You work through a practical example of those to APIs where a rogue component was implemented to separate its children evenly. Finally, you were introduced to the spread operator in react, you learned that the spread operator enables two main operations and objects, copying and merging. You then saw how react uses that operator to spread all the props instead of having to type them manually one by one. Finally, you were presented some practical examples that illustrated how the spread operator allows the creation of flexible components. You then moved on to a lesson on advanced patterns to reusing common behavior. The lessons started with an overview of cross cutting concerns and react. You learned that cross cutting concerns refers to generic functionality that is not related to the application business logic and that is needed in many places. Like handling errors, authenticating or fetching data. You understood why components despite being the primary unit of code reuse and react don't fit this type of logic. After that you were presented with two techniques for cross cutting concerns. The first technique you were introduced to was the higher order component technique, which you learned enables a powerful abstraction for creating cross cutting concerns. You were also presented with an example of how data fetching can be abstracted using this technique. As part of a practical lesson on higher order components. You learned that a higher order component is just a function that takes a component and returns a new one. You were presented with a required code structure to create a higher order component and examined an application of a higher order component that handled the position of the mouse pointer on the screen. Then you learned about the second technique for cross cutting concerns called render props. Which is a special prop you add to your components with a particular attribute of being a function that returns a react element. You discovered that as opposed to higher order components, the new props are injected dynamically as the parameters of the function. And worked through a practical example where the render props technique was used to abstract the functionality of fetching data from a server. The module ended with a lesson on component testing using react testing library. The lesson began with a comprehensive explanation as to why react testing library is the recommended tool for your tests. You learned that to guarantee that your applications work as intended, a suite of automated tests is crucial. You were presented with best practices when it comes to testing, seeing how the react testing library has been designed with all of them in mind. Finally, you were introduced to a basic example of a test with gest the recommended test runner and react testing library to illustrate the basic scaffolding of a test. The lesson and component testing concluded with a practical application of tests in a real world example. With this, you learned how well designed tests can catch errors in your code, providing you with the necessary context to fix them. You also discovered a more complex application that can be easily tested with a few lines of code. Then you were presented with several APIs from react testing library like screen to query on the global document in different query types like querying by text or querying by role. Lastly, you learned about different matters for your expectations and assertion, like to have been called for mock functions and to have attributes for attributes in your elements. Fantastic work congrats for getting to this point in the course. It's time to use everything you have learned so far and build some amazing applications.
cript:s

잘했어요. 이 모듈의 마지막 부분인 React JSX 고급 패턴과 테스트에 대해 알아보았습니다. 잠시 시간을 내어 지금까지 배운 내용을 복습해 보겠습니다. JSX에 대한 심층적인 강의로 모듈을 시작하면서 컴포넌트와 엘리먼트의 차이에 대해 배웠습니다. 컴포넌트는 데이터나 소품을 입력으로 받아 엘리먼트 트리를 출력으로 반환하는 함수라는 것을 배웠습니다. 또한 엘리먼트는 돔을 가볍게 표현하고 반응이 빠르고 예측 가능한 방식으로 사용자 인터페이스를 업데이트할 수 있게 해주는 일반 자바스크립트 객체라는 것도 배웠습니다. 다음으로 컴포넌트 구성의 중요성과 자식 소품의 사용에 대해 알아봤습니다. 컴포넌트 컴포지션과 전문화에 대해 소개했습니다. 컴포넌트 컴포지션의 두 가지 주요 속성입니다. 봉쇄는 자식을 미리 알 수 없는 컴포넌트에 적용할 수 있는 기법이라는 것을 배웠습니다. 대화나 사이드바처럼 특수 자식인 두 개의 패스 요소를 직접 콘텐츠로 사용하는 것입니다. 또한 대화 상자를 기반으로 확인 대화 상자를 만드는 것과 같이 다른 컴포넌트의 특수한 경우의 컴포넌트를 정의할 수 있는 기법인 전문화 기법도 소개했습니다. 그런 다음 JSX에서 자식을 동적으로 조작하는 방법에 대한 강의로 넘어갔습니다. 여기서는 두 가지 새로운 react API인 react dot clone 엘리먼트와 react dot 자식 엘리먼트에 대해 소개했습니다. 리액터 닷 클론 엘리먼트는 엘리먼트를 복제하고 새 엘리먼트를 반환하여 JSX에서 직접 엘리먼트를 조작하고 변형할 수 있다는 것을 배웠습니다. 또한 반응 도트 자식 도트 맵이 자식 조작에 유용하며, 반응 도트 복제 엘리먼트와 함께 사용하면 유연한 컴포넌트를 생성할 수 있는 강력한 컴포지션 모델을 사용할 수 있다는 것도 배웠습니다. 자식 컴포넌트를 균등하게 분리하기 위해 불량 컴포넌트를 구현한 API에 대한 실제 예제를 살펴봅니다. 마지막으로 리액트의 스프레드 연산자를 소개하면서 스프레드 연산자가 복사 및 병합이라는 두 가지 주요 연산과 객체를 가능하게 한다는 것을 배웠습니다. 그런 다음 리액트에서 이 연산자를 사용하여 모든 소품을 하나씩 수동으로 입력할 필요 없이 어떻게 스프레드하는지 보았습니다. 마지막으로 스프레드 연산자가 어떻게 유연한 컴포넌트를 생성할 수 있는지를 보여주는 몇 가지 실제 예제를 소개했습니다. 그런 다음 일반적인 동작을 재사용하는 고급 패턴에 대한 강의로 넘어갔습니다. 강의는 교차 절단 우려와 리액트에 대한 개요로 시작되었습니다. 교차 절단 우려는 애플리케이션 비즈니스 로직과 관련이 없고 여러 곳에서 필요한 일반 기능을 의미한다는 것을 배웠습니다. 오류 처리, 인증 또는 데이터 가져오기 등이 이에 해당합니다. 코드 재사용과 리액트의 기본 단위임에도 불구하고 컴포넌트가 이러한 유형의 로직에 맞지 않는 이유를 이해했습니다. 그 후 교차 절단 문제를 해결하기 위한 두 가지 기법을 소개받았습니다. 첫 번째 기법은 고차 컴포넌트 기법으로, 교차 절단 문제를 생성하기 위한 강력한 추상화를 가능하게 한다는 것을 배웠습니다. 또한 이 기법을 사용하여 데이터 가져오기를 추상화할 수 있는 방법의 예도 제시되었습니다. 고차 컴포넌트에 대한 실습 강의의 일부입니다. 고차 컴포넌트는 컴포넌트를 취하고 새로운 컴포넌트를 반환하는 함수라는 것을 배웠습니다. 고차 컴포넌트를 생성하는 데 필요한 코드 구조를 제시받고 화면에서 마우스 포인터의 위치를 처리하는 고차 컴포넌트의 애플리케이션을 살펴봤습니다. 그런 다음 렌더 소품이라는 교차 절단 문제에 대한 두 번째 기술에 대해 배웠습니다. 렌더 소품은 반응 엘리먼트를 반환하는 함수라는 특정 속성을 가진 컴포넌트에 추가하는 특별한 소품입니다. 고차 컴포넌트와 달리 새로운 소품은 함수의 매개변수로 동적으로 주입된다는 것을 알게 되었습니다. 그리고 서버에서 데이터를 가져오는 기능을 추상화하기 위해 렌더 프로프 기법을 사용한 실제 예제를 살펴봤습니다. 이 모듈은 리액트 테스트 라이브러리를 사용한 컴포넌트 테스트에 대한 강의로 마무리되었습니다. 이 강의는 리액트 테스트 라이브러리가 테스트에 권장되는 도구인 이유에 대한 포괄적인 설명으로 시작되었습니다. 애플리케이션이 의도한 대로 작동하도록 보장하려면 자동화된 테스트 스위트가 중요하다는 것을 배웠습니다. 테스트와 관련된 모범 사례를 살펴보고, 이 모든 것을 염두에 두고 리액트 테스트 라이브러리가 어떻게 설계되었는지 살펴보았습니다. 마지막으로, 테스트의 기본 스캐폴딩을 설명하기 위해 권장 테스트 러너와 React 테스트 라이브러리를 사용한 테스트의 기본 예제를 소개했습니다. 강의와 컴포넌트 테스트는 실제 예제에서 테스트를 실제로 적용하는 것으로 마무리되었습니다. 이를 통해 잘 설계된 테스트가 코드에서 오류를 포착하여 오류를 수정하는 데 필요한 컨텍스트를 제공하는 방법을 배웠습니다. 또한 몇 줄의 코드로 쉽게 테스트할 수 있는 더 복잡한 애플리케이션도 발견했습니다. 이제 여러분은