우아한 테크) 그루밍의 상태관리와 반응형 프로그래밍

https://www.youtube.com/watch?v=alsCMx6vpG4

 

[상태]  :변화하는 데이터
->ui의 동적으로 표현되는 데이터
->즉 사용자의 액션에 따라서 변경될 수 있는 컴포넌트의 부분을 나타내는 자바스크립트 객체

[상태 관리]: 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것. 
앞서 말한 상태 즉 계속 변화하는 데이터를 알맞게 관리하기 위해 나온 개념

ex) 게임을 검색해서 원하는 게임을 찾는 것 , 채팅방이 만들어지고 사라지는 것
-> 게임이나 채팅방의 상태가 변경되면서 ui도 같이 변경이 되는 것.


[상태에 대한 관리의 필요성]
1. 페이스북에서 좋아요를 누르면 모든 페이지가 다시 랜더링 되는 것이 아니라 실시간으로 좋아요 반영이 되고 인스타그램의 팔로우 반영

2.  하나의 페이지에서도 다양한 형태들이 존재하고 어떻게 변화하는지 우리가 제대로 알고 있어야 하기 때문에 이를 효과적으로 관리해야 할 필요가 생김

우리는 주로 컴포넌트를 기반으로 프로젝트를 만들게 된다
그런데 이런 컴포넌트들은 각자 독립적으로 존재를 하는 게 아니라 서로 데이터를 공유하곤 한다.

ex)검색 컴포에 대해서 우리가 게임을 검색을 하면 그에 맞는 게임이 화면에 나타난다.
게임에 들어가서 채팅에 참여를 하면 채팅에 참여 중인 사람 수가 늘어난다.

-> 컴포넌트는 다 다르지만 사용하는 데이터는 서로 연결이 되어 있는 경우가 많다. 

이렇게 컴퍼넌트 간에 통신을 할 때나 상호 간에 데이터 전달을 조금 더 자연스럽게 관리할 필요성이 대두되면서 상태 관리에 대한 중요성도 높아졌다. 



[반응형 프로그램]
데이터가 변화하면 그 데이터가 변함에 따라서 알아서 반응을 하는 프로그래밍: 반응형 프로그래밍
컴포넌트를 구성을 하고 이것의 변화를 감지해서 변화가 일어날 때마다 알림을 받고 변화한 데이터에 따라서 본인이 해야 하는 일들을 시행을 하게 된다.  

반응형 프로그래밍의 핵심: 프로그램이 외부 환경과 어떻게 커뮤니케이션 하는 가



[프로그램이 외부 환경과 커뮤니케이션 하는 방법]

풀:외부 환경에 직접 명령을 하고 응답이 오기까지를 기다린다.
푸시 :내가 물어볼 때 알려주는 게 아니라 너가 바뀌면 나한테 알려줘라고 선언을 하고 제어권을 넘겨버리고 데이터를 만드는 쪽에서 데이터가 바뀌면 알려준다
->반응형 프로그램은 푸시하는 방식으로 동작한다.



[반응형 프로그래밍에 기반이 되는 패턴]
1. 옵저버 패턴
관찰하는 패턴 옵저버 패턴은 객체(state) 상태의 변화를 관찰하는 옵저버 즉 관찰자들이 있고 이 관찰자를 객체에 구독을 해서 그 객체의 상태 변화(publish)가 있을 때마다 메서드를 통해서 객체가 목록에 등록된 관찰자들한테 통지를 하는 디자인 패턴을 말한다.

ex)이벤트 핸들러
이벤트 핸들러가 옥저버 역할을 하고 이벤트는 구경을 당하는 개체 
이벤트를 등록만 해주면 이벤트가 발생이 되었을 때 우리한테 알려준다
->구독과 알림이 내부에 구현이 되어 있기 때문
->실시간으로 한 객체의 변경 사항을 다른 객체에 전파를 해서객체 간의 의존성을 제고할 수 있다는 장점이 있다

2. Publish/Subscribe Pattern
옵저버 패턴의 변화된 패턴
펍섭 패턴에서는 구독자를 바로 객체에 구독을 하는 게 아니라 중간에 이벤트 관리자를 구독한다.
마찬가지로 객체도 변화하면 중간에 그 이벤트 채널을 통해서 구독자에게 변화된 내용을 전달한다

->객체가 구독자를 서로 알지 않아도 됨. 
->구독자와 객체가 직접적으로 서로 연락하는 게 아니라 서로 간의 결합도가 낮아짐



3. 프록시 패턴(잘이해하지 못함)
프록시 패턴은 말 그대로 하나의 객체가 프록시 역할을 수행해서 상황에 따라 다른 객체에 접근하게 해주거나 다른 함수를 호출하게 해주는 패턴. 
프록시 객체는 프록시 패턴을 사용할 때 실제를 대신하는 객체. 
프록시는 기존의 스테이트를 변경시키지 않으면서 그 스테이트 객체를 감싸서 사용할 수 있게 해준다.