Personal-Study55 [TS Design Patterns] 행동 패턴 - 옵저버 Observer (Event-Subscriber, Listener) - 여러 객체에 자신이 관찰중인 객체에 발생하는 모든 이벤트에 대해 알리는 구독 메커니즘 정의할 수 있도록 함 - 일부 객체들이 다른 객체들에 자신의 상태 변경에 대해 알릴 수 있음 - 구독자 인터페이스를 구현하는 모든 객체에 대한 이벤트들을 구독 및 구독 취소하는 방법 제공 - 예시 /** * The Subject interface declares a set of methods for managing subscribers. */ interface Subject { // Attach an observer to the subject. attach(observer: Observer): void; // Detach an observer fr.. 2023. 11. 12. [TS Design Patterns] 행동 패턴 - 메멘토 Memento (Snapshot) - 객체의 구현 세부 사항을 공개하지 않으면서 해당 객체의 이전 상태를 저장하고 복원할 수 있게 해줌 - 메멘토는 상태 스냅샷들의 생성을 해당 상태의 실제 소유자인 originator 객체에 위임함 -> 다른 객체들이 '외부'에서 상태를 복사하려 시도하는 대신, 자신의 상태에 대해 완전한 접근 권한을 갖는 클래스가 자체적으로 스냅샷 생성 가능 - 메멘토라는 특수 객체에 객체 상태의 복사본을 저장하도록 제안 - 메멘토를 생성한 객체를 제외한 다른 어떤 객체도 해당 메멘토에 접근할 수 없음 - originator는 메멘토에 대한 전체 접근 권한이 있지만, caretaker는 메타 데이터만 접근 가능 - caretaker에 메멘토 저장 가능, 제한된 인터페이스를 통해서만 메멘.. 2023. 11. 7. [UI Component] Design Patterns - Compound Compound - 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 함 - 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해줌 - 컴포넌트의 Static property로 만듦 - 컴포넌트 라이브러리 만들 때 유용하게 사용 가능 ex) Semantic UI library - 자식 컴포넌트 순회 처리하는데도 Compound 패턴 사용 가능 - React.cloneElement 사용하여 자식 컴포넌트 복제하여 각각 prop 넘길 수 있음 (Context API 사용 X) - 장점 - 추상화가 잘됨 - 자식 컴포넌트들을 일일히 import할 필요 없음 - 단점 - 내부에서 React.children.map을 사용하고 있어서 사용하는 쪽에서 자식 컴포넌트를 사전 정의된 형태로 넘겨야 하는 제약 발.. 2023. 11. 6. [UI Component] Design Patterns - Hooks Hooks - 앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용함 - React 16.8 버전에 Hooks라는 기능이 추가됨 - React의 상태와 생명 주기 함수들을 ES6 클래스를 사용하지 않고 쓸 수 있게 해줌 - 클래스 컴포넌트 단점 (Legacy) - 옛날에는 생명 주기 메서드들을 사용하려면 함수형 -> 클래스형 컴포넌트로 리팩토링이 필요했음 - 그래서 여러 컴포넌트에서 코드 공유 위해 HOC나 Render Prop 패턴을 사용했음 -> Wrapper Hell 발생 가능 - 컴포넌트 로직이 복잡해지고 나중에는 디버깅과 성능 최적화를 어렵게 만듦 - 생명 주기 메서드들은 꽤 많은 코드의 중복을 발생시킴 - React Hooks는 컴포넌트의 상태와 라이프사이클 메서드를 관리할 수.. 2023. 11. 6. 이전 1 2 3 4 5 ··· 14 다음 반응형