책 내용을 정리하는 것이 아니라, 해당 범위에서 특별히 정리하고 싶은 내용이나 책을 읽으면서 들었던 궁금한 부분을 작성한다.
읽다가 갑자기 정리하고 싶은 내용을적기도 한다. 꼬꼬무,,,(꼬리에 꼬리를 무는 공부)
궁금한 부분에 대한 답변은 의문이 해소된 후에 작성한다 (영원히 작성되지 않을수도..)
정리
옵저버 패턴(관찰자 패턴)이란?
주체가 어떤 객체(subject)의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다.
옵저버 패턴의 주체
객체의 상태 변화를 보고 있는 관찰자를 의미한다.
옵저버 패턴의 옵저버들
객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체들을 의미한다.
프록시 객체를 통한 옵저버 패턴 구현(JS)
function createReactiveObject(target, callback) {
const proxy = new Proxy(target, {
set(obj, prop, value){
if(value !== obj[prop]){
const prev = obj[prop]
obj[prop] = value
callback(`${prop}가 [${prev}] >> [${value}] 로 변경되었습니다`)
}
return true
}
})
return proxy
}
const a = {
"형규" : "솔로"
}
const b = createReactiveObject(a, console.log)
b.형규 = "솔로"
b.형규 = "커플"
// 형규가 [솔로] >> [커플] 로 변경되었습니다프록시(Proxy) 객체란?
어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며, 두 개의 매개변수를 가진다.
target : 프록시할 대상
handler : 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수
고민하고 기억하기
p. 36
Q. 옵저버 패턴과 MVC 패턴의 관계
MVC 패턴에서의 모델은 변경되면 자신의 관찰자 객체에게 알림을 보내며, 뷰는 관찰자 패턴을 사용해 모델이 변경되거나 수정될 때마다 뷰가 알아차릴 수 있도록 한다. 또한 컨트롤러는 사용자의 상호작용을 처리하고 뷰에 무엇을 보여줄지를 결정한다.
이는 옵저버 패턴의 주체라고 볼 수 있는 모델에서 변경 사항이 생겨 update() 메서드로 옵저버인 뷰에게 알려주고, 이를 기반으로 컨트롤러 등이 작동한다고 볼 수 있다.
Q. MVC 패턴이란?
애플리케이션의 구조를 개선하기 위해 관심사의 분리를 활용하는 아키텍처 디자인으로,
비즈니스 데이터(모델)과 UI(뷰)를 분리하고, 세 번째 구성 요소(컨트롤러)가 로직과 사용자 입력을 관리하는 구조이다.
자바스크립트 + 리액트 디자인 패턴
p. 145 최신 프레임워크에서는 상태의 변화를 컴포넌트에 알리기 위해 관찰자 패턴을 사용하곤 한다
Q. 관찰자 패턴과 리액트 렌더링의 연관 관계
실제로, 관찰자 패턴 부분을 읽으면서 리액트 렌더링 과정이 생각남
관찰자 패턴은 변경 사항이 일어났을 경우, 알림 메시지를 보내 업데이 메서드를 실행함
React 렌더링도 상태 변화가 있을 때만(diff 발생 시) 렌더링이 발생하며, 상위 컴포넌트에서 변경이 일어나면 하위 컴포넌트 역시 리렌더링됨
두 로직의 내부를 본다면, 비슷할 것 같다는 생각이 들었음
react 18.2부터는 React의 업데이트(Promise, Timeout, EventHandler)가 자동적으로 일괄 처리된다고 하는데, 더욱 더 리액트 내부에 그러한 알고리즘이 있지 않을까 생각됨
Q. 관찰자 패턴과 useContext의 관계?
그러니까 자연스럽게 useContext와도 비슷한 것 같음. useContext를 공급자 패턴에 비유하기도 했지만, 관찰자 패턴이기도 한 것 같음.
useContext는 크게 Provider(컨텍스트 영역 지정)와 Consumer(컨텍스트를 사용하는 쪽)으로 나뉨
즉, Consumer 영역은 상태의 주체이며, 직접적으로 상태가 변화하는 컴포넌트는 구체적 주체로서 ‘상태 변화’를 알리는 게 아닐까?
=> useContext의 내부 코드를 보고 싶다. 관찰자 리스트를 관리하는 코드, 상태 변화 알림을 전달하는 코드, 알림을 감지하고 update를 진행하는 코드가 있으면 재미있을 듯
Q. 관찰자 패턴과 중재자 패턴의 차이
관찰자 패턴: 이벤트를 관리하고, 이벤트가 발생했을 때 관련된 구독자에게 알림을 주는 것에 초점
중재자 패턴: 이벤트가 발생했을 때, 공통적으로 실행될 로직을 관리하는 것에 초점
=> 좀 더 공부해서 추가하기