Personal-Study55 [UI Component] Design Patterns - Render Props Render Props - JSX 엘리먼트를 props를 통해 컴포넌트에게 전달함 - HOC와 같이 컴포넌트를 재사용하는 또 다른 방법 - prop을 받는 컴포넌트가 재사용성이 좋아짐 - render prop 함수를 호출할 때 인자를 전달할 수 있음 - 상태를 부모 컴포넌트로 올리기 - 규모가 큰 앱에서 컴포넌트가 여러 자식 컴포넌트를 가지고 있는 경우 까다로울 수 있음 - 상태의 변경은 모든 자식 컴포넌트의 리렌더링 유발 가능 - 앱의 전체적인 성능이 떨어질 수 있음 - render prop을 넘기는 대신 자식 컴포넌트를 함수로 넘길 수 있음 - 몇몇 상황에서 hooks로 대체될 수 있음 - 장점 - 몇몇 컴포넌트 간 데이터 공유가 간단함 - children prop을 활용하는 것으로 해당 컴포넌트 재.. 2023. 11. 6. [TS Design Patterns] 행동 패턴 - 반복자 Iterator - 컬렉션 요소들의 기본 표현(리스트, 스택, 트리 등)을 노출하지 않고 하나씩 순회할 수 있도록 함 - 컬렉션의 순회 동작을 반복자라는 별도의 객체로 추출 - 컬렉션이 내부에 복잡한 데이터 구조가 있지만 구조의 복잡성을 보안이나 편의상의 이유로 클라이언트들로부터 숨기고 싶을 때 사용 - 앱 전체에서 순회 코드의 중복을 줄이기 - 코드가 다른 데이터 구조들을 순회할 수 있기 원할 때, 또는 이러한 구조들의 유형을 미리 알 수 없을 때 사용 - 복잡한 데이터 구조의 내부 세부 정보를 노출하지 않고 해당 구조를 차례대로 순회할 수 있도록 함 - 예시 /** * Iterator Design Pattern * * Intent: Lets you traverse elements of a collec.. 2023. 11. 5. [TS Design Patterns] 행동 패턴 - 커맨드 Command (Action, Transaction) - 요청을 요청에 대한 모든 정보가 포함된 독립 실행형 객체로 변환 - 다양한 요청들이 있는 메서드들을 인수화할 수 있고, 요청의 실행을 지연 또는 대기열에 넣을 수 있음, 또 실행 취소할 수 있는 작업 지원 - 올바른 소프트웨어 디자인은 종종 관심사 분리의 원칙을 기반으로 함 - GUI 객체들이 비즈니스 로직에게 직접 요청을 보내지 않고 모든 요청 세부 정보들을 요청을 작동시키는 단일 메서드를 가진 별도의 커맨드 클래스로 추출하라고 제안 - 커맨드 객체들은 다양한 GUI 객체와 비즈니스 논리 객체들 간의 링크 역할을 함 - GUI는 커맨드를 작동시킬 뿐 다른 어떤 것도 알 필요 없음 커맨드가 모든 세부 사항들을 처리함 - 작업들로 객체를 매개변수화 .. 2023. 11. 5. [TS Design Patterns] 행동 패턴 - 중재자 Mediator (Intermediary, Controller) - 객체 간의 혼란스러운 의존 관계를 줄일 수 있음 - 객체 간의 직접 통신을 제한하고 중재자 객체를 통해서만 협력하도록 함 - 서로 독립적으로 작동해야 하는 컴포넌트 간의 모든 직접 통신을 중단한 후, 대신 이러한 컴포넌트들은 호출들을 적절한 컴포넌트들로 리다이렉션하는 특수 중재자 객체를 호출하여 간접적으로 협력하도록 제안함 -> 단일 중재자 클래스에만 의존하게 됨 - ex) 모든 항공 통신은 비행기 관제탑을 통해 이루어짐 - 일부 클래스들이 다른 클래스들과 단단하게 결합하여 변경하기 어려울 때 사용 - 타 컴포넌트들에 너무 의존해서 다른 프로그램에서 컴포넌트를 재사용할 수 없을 때 사용 - 몇 가지 기본 행동을 다양한 콘텍스트들에서 재사.. 2023. 11. 4. 이전 1 2 3 4 5 6 ··· 14 다음 반응형