Personal-Study55 [UI Component] Design Patterns - HOC HOC - 앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공함 - ex) 컴포넌트 스타일 시트 설정, 권한 요청, 전역 상태 추가 등 - 고차 컴포넌트: 다른 컴포넌트를 받는 컴포넌트 - Composing - 여러 HOC 조합 - HOC 사용하는 유명 오픈소스 라이브러리 -> recompose - 몇몇 상황에서는 Hooks로 대체 가능 - 일반적으로 React의 훅은 HOC 패턴을 완전 대체할 수 없음 - 대부분의 경우에서 React의 훅은 트리가 깊어지는 상황을 줄일 수 있음 - 훅은 컴포넌트 내부에서 특정한 동작을 추가할 수 있게 해주지만, HOC에 비해 버그 발생 확률 높음 - HOC 여러번 조합해서 사용하면 모든 prop이 안에서 병합되므로 어떤 HOC가 어떤 props에 관련 있.. 2023. 11. 3. [UI Component] Design Patterns - Mixin Mixin - Mixin: 상속 없이 객체나 클래스에 재사용 가능한 기능을 추가할 수 있는 객체 - 단독으로는 사용 불가 - Object.assign()을 이용하여 믹스인 (추가) 기능을 프로토타입에 추가 가능 - 믹스인 자체는 상속 가능 - Window 객체는 WindowOrWorkerGlobalScope와 WindowEventHandler의 믹스인으로 구성되어 있어서 setTimeout, setInterval, indexedDB, isSecureContext와 같은 프로퍼티 사용 가능 - 믹스인 자체를 직접적으로 사용 불가 - ES6 문법 이전 믹스인은 React에서 컴포넌트에 기능을 추가하기 위해 종송 사용했었음 하지만 믹스인이 복잡도를 증가시키고 재사용하기 어렵게 만든다고 해서 지금은 훅에 의해 .. 2023. 11. 1. [TS Design Patterns] 행동 패턴 - 책임 연쇄 Chain of Responsibility (Chain of Command) - 일련의 핸들러들의 체인을 따라 요청을 전달할 수 있게 해줌 - 각 핸들러는 요청을 받으면 요청을 처리할지 아니면 체인의 다음 핸들러로 전달하지 결정함 - 특정 행돌들을 핸들러라는 독립 실행형 객체들도 변환함 - 핸들러가 요청을 체인 아래로 더 이상 전달하지 않고 추가 처리를 사실상 중지하는 결정을 내릴 수 있음 - 다양한 방식으로 다양한 종류의 요청들을 처리할 것으로 예상되지만, 정확한 요청 유형들과 순서들을 미리 알 수 없는 경우에 사용 - 특정 순서로 여러 핸들러를 실행해야 할 때 사용 - filter, event chain과 같은 객체 체인과 함께 작동할 때 유용 - 예시 /** * The Handler interfac.. 2023. 11. 1. [UI Component] Design Patterns - Module Module - 코드를 재사용 가능하면서 작게 나눔 - 모듈 스코프 내에 변수를 선언하고 명시적으로 외부에 export 하지 않으면 해당 변수 접근 불가 -> 전역 스코프의 변수들과 이름이 충돌하는 문제 줄일 수 있음 - named export - 명시적으로 export한 값들만 외부에 노출됨 - import할 때 as 키워드를 통해 import한 값의 이름 변경 가능 - export 키워드를 사용한 선언들 중에 하나를 default export 할 수 있음 -> import할 때 중괄호 없이 바로 사용 가능, 자유롭게 이름 변경 가능 - *를 사용하여 모든 것들을 한번에 import하여 객체 형태로 사용 가능 - Dynamic import: 특정 조건에서만 특정 모듈 로드할 수 있음 - 모듈을 동적으로.. 2023. 10. 31. 이전 1 2 3 4 5 6 7 ··· 14 다음 반응형