[JS]Store 기능

In lecture

강의에선 Store 를 만들어서 observer Pattern을 이용해서 데이터를 관리하며, 검색 기능을 구현했다.

Store 기능이란?

일단 요약을 해보자면 상태관리를 위한 저장소로 이해하면 되겠다.

그러나 Store 기능이 이해가 도통 안가서 언제나 그랬듯 그림을 그려보았다

강의의 예시 코드는,

예시코드는 Github Repo에 있습니다!: Link

1. message : "Hello" 라는 배열(객체)를 Store에 저장,
2. 이에 대한 변화를 구독
3. 변화가 감지되면 명령을 실행
   flow로 흘러간다.

예를 들어
TextField.js 에 인풋에 입력되는 값을 messageStore라고 해서 할당하고,
Message.js에서 이를 구독해서,
만약 이 message 가 변화가 생긴다면 callback 함수를 실행하는 flow라고 보면 된다.

따라서, callback 함수로 DOM에 변화하는 message를 출력하도록 했기때문에,
TextField.js 의 input 요소에 입력되는 값이,
Message.js가 만들어낸 div 안에 입력되면서 동적으로 값이 변할 것임을 알 수 있다.

Title.js 도 비슷한 흐름으로 진행될것이며, callback 함수로 console 에 입력값을 출력하고, 마찬가지로 textContent에 message 의 상태를 할당하여 동적으로 값이 변할것이다.

결국,
message라는 하나의 데이터를 TextField.js,Message.js,Title.js 에서 각자의 방식대로 활용할 수 있는 것이다.