[20.12.17] 옵저버 패턴

Reference

How to Use the Observable Pattern in Java Script

Why

최근 우아한테크코스의 마지막 과제를 수행할 당시, 가장 까다로웠던 부분을 꼽아 보자면 '한 컴포넌트에서 데이터가 바뀔 때마다 각기 다른 페이지에도 동일한 데이터가 업데이트 되어야 한다'는 점이었다. 과제를 수행할 당시에는 이 부분에 대한 디자인을 어떻게 정립해야할 지 감이 오질 않아, 한 모듈 안에서 상태가 바뀌게 되면 다른 모듈의 객체를 생성해 렌더링하는 식으로 코드를 짰었다. 하지만 그렇게 프로그램을 빌드해가니 한 모듈 안에서 각기 다른 모듈에 대한 의존성이 높아지는 코드들이 포함되고 한 눈에 보기해도 뭔가 하드 코딩스러운 부분이 눈에 보였다. 그래서 디자인 패턴에 대한 포스트를 공부하며 MVC 등 패턴이 뭔지 알아 보다가, 마침 내 코드의 문제점에 대해 정확히 다루어줄 파트를 찾아 그 부분에 대해 다루어보고 싶었다.

Define the problem

리액트 류의 프레임 워크에서는 state라는 개념이 있다. 이 state가 업데이트 될 때마다, 각 컴포넌트들이 re-render 되지만, 순수 JS 같은 경우에는 이런 문제를 극복하기 위해서는 하나의 디자인 패턴을 정립할 필요가 있었다. 모든 디자인 패턴은 소프트웨어 프로그래밍 내에서 발견될 문제를 사전에 예방하고자 만들어진 개념이기에 먼저 문제에 대해 명시를 해두자면, 앱에서 상태(데이터)가 변경 될 때 다수의 페이지에서 그것이 업데이트되어야 한다는 점이다.

State

state란, 애플리케이션이 의존하고 있는 어떠한 데이터에 대한 객체를 일컫는다. 애플리케이션은 외부 API에서 얻어온 정보들을 바탕으로 렌더링 되는데 그러한 데이터들을 가지고 있는 집합체라 보면 된다.

Observer Pattern

옵저버 패턴이란, subject 객체가 observer라 불리는 의존성의 리스트를 관리하고 있다가 메소드의 호출을 통해 상태 변화를 자동으로 알려 주는 소프트웨어 설계 패턴이다. -위키피디아

 

일반적으로 옵저버 패턴은, '일 대 다수'의 관계를 표현한다. 그래서 하나의 객체가 업데이트 되면, 그 객체는 다른 객체들에게 그 사실을 알려주는 것이다.

 

• subject : 상태가 업데이트 될 때, 모든 옵저버들에게 그 상태를 알려 주는 역할을 한다.
• observers : 상태가 업데이트 될 때, 그것에 맞게 이벤트를 취하는 역할을 한다.

 

JS 에서는 확장성을 위해 이와 관련한 부모 클래스를 생성한다. 그래서 이 클래스들은 옵저버 패턴을 사용하기 위해 필요한 프로퍼티와 메소드를 가지게 된다.