리액트 디자인 패턴

React 디자인 패턴에 대한 LinkedIn 학습 과정을 수강하려고 합니다.

이 블로그 항목은 다른 사람들을 위한 공개 메모 역할을 합니다. 프리미엄 구독에 묶여 있기 때문에 많은 사람들이 코스에 액세스할 수 없습니다. 내 노트가 적어도 반응 애플리케이션에서 디자인 패턴 작성의 핵심을 이해하는 데 도움이 되기를 바랍니다.

디자인 패턴이란 무엇입니까?
Shaun은 디자인 패턴을 일반적인 애플리케이션 개발 문제에 대한 효과적인 솔루션으로 정의합니다.

다음을 포함하도록 디자인 패턴을 적용할 반응 앱을 만드는 일반적인 과제:

재사용 가능한 레이아웃 만들기

여러 구성 요소 간에 복잡한 로직 재사용

양식으로 작업하기 -- 구체적으로 내가 그것에 대한 요지가 있는 이유

기능적 개념을 코드에 통합하는 것 -- 여기에는 상태 등을 변경하지 않는 것이 포함된다고 생각합니다.

먼저 레이아웃 구성 요소를 살펴보겠습니다.
레이아웃 구성 요소는 페이지에서 다른 구성 요소를 정렬하는 기본 기능이 있는 반응 구성 요소입니다.

일반적으로 구성 요소를 만들 때 컨테이너 div와 스타일을 함께 포함합니다.
그 예는 다음과 같습니다.

<div styles={...}>
   <h1>Component Code...</h1>
</div>

대신 앱의 구조와 스타일 또는 앱의 특정 부분을 가진 레이아웃 구성 요소를 사용한 다음 그 안에 자식을 렌더링할 수 있습니다.

<div styles={...}>
  {children}
</div>

-- 레이아웃 스타일을 자체 구성 요소로 분할
-- 레이아웃 구성요소 내부에 구성요소 자체를 표시합니다.

우리는 왜 이것을 하는가?

구성 요소 자체를 페이지에 표시되는 위치와 분리하려는 시도입니다.

요약해서 말하자면:
레이아웃 구성 요소의 개념은 구성 요소가 자신이 표시되는 위치를 알 수 없다는 것입니다.

다음은 이를 더 잘 보여주는 샌드박스입니다.



레이아웃 구성 요소는 개발자 경험을 향상시키는 방식으로 작성되어야 합니다. 모든 소프트웨어 디자인 패턴의 목표는 문제를 해결하는 것뿐만 아니라 문제를 해결하는 동안 복잡성을 줄이는 것입니다.