SPA의 상태 관리 방법

회사에서 뷰로 개발을 하는데 하나의 컴포넌트로 여러 모달창을 그릴 때가 많았다. 그럴 때마다 필요한 데이터들을 주는데 공통된 데이터가 매우 많고 또 모달 컴포넌트 안에 또 자식 컴포넌트라도 생기는 날에는 부모의 자식 그 자식의 자식까지 props를 내려주는 경우가 있었다. 너무너무 귀찮고 너무 복잡도가 올라가기도 하고 각 컴포넌트 마다 결합도 높아지는 소리가 여기저기서 들렸다. 그러다가 상태관리를 하면 그런 수고로움을 덜 수 있다는 것을 알게 되었고, 공부 하려고 한다. 상태 관리에 필요한 디자인 패턴에 대해 공부하고, 얘네가 어떻게 상태를 관리 해준다고 말하는지 알아볼 것이다. 또 JS로 상태관리를 만들어보겠다.

옵저버 패턴

옵저버 패턴은 객체의 상태 변화를 관찰하는 옵저버들의 목록을 객체에 등록해서 상태 변화가 발생할 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 즉, 어떤 객체의 상태가 변하면 연관된 객체들에게 알림을 보내는 디자인 패턴이다.

이 패턴의 핵심은 상태를 가진 객체(subject)인 ‘발행기관(publisher)’에 이 객체를 관찰하는 옵저버들인 ‘구독자(subscriber)’들을 등록시키는 것이다. 그리고 각각의 구독자들은 발행기관이 발생시키는 이벤트를 받아 처리한다. 이 때문에 ‘발행/구독 모델’이라고도 한다.

옵저버 패턴은 MVC 패러다임과 자주 결합되어 사용된다. 옵저버 패턴을 사용함으로써 MVC에서 모델과 뷰 사이를 느슨하게 연결할 수 있다.

느슨한 결함 : 객체들이 상호작용을 하지만 서로 잘 모르는 관계, 유연성이 좋아지고 의존도를 낮출 수 있다. 각 객체는 독립적으로 사용 될 수 있다.