Today I Learned
바닐라 자바스크립트를 사용한 과제에서 App 컴포넌트에서 상태를 저장하고, 하위 컴포넌트로 데이터를 넘겨주는 방식을 사용했다. 그러나 컴포넌트의 뎁스가 깊어질수록 하위 컴포넌트에서 이벤트를 등록하고, 상위컴포넌트에서 콜백 함수를 전달받는 과정이 점점 관리하기 힘들어지고 지저분해지기 시작하면서, 리덕스의 상태관리를 바닐라 자바스크립트에서 구현하는 것이 어떨까 생각하면서 이것 저것 조사하고 있다.
바닐라 자바스크립트에서 상태 관리 만들기
상태 관리의 중요성
현대적인 프론트엔드에서 가장 중요한 것이 상태 관리이다. 일반적인 프레임워크나 라이브러리(React, Vue)는 모두 상태 기반으로 렌더링을 한다.
우리가 토이프로젝트로 많이 만드는 TodoList는 컴포넌트의 깊이가 깊지 않아 상태관리의 필요성을 잘 느끼지 못한다. 단순히 App에서 state를 정의하고, 정의한 state를 바탕으로 필요한 컴포넌트에 필요한 정보들을 전달해주면 된다. 그러나 프로덕션에서 계속해서 필요한 정보를 필요한 컴포넌트까지 내려다준다면? → 그 정보가 필요하지 않은 부모 컴포넌트들이 정보를 전달받고 전달해 주어야 함 뿐만 아니라 인적인 실수가 발생하여 디버깅이 어려워 질 수도 있다. 따라서 전역으로 상태를 관리하고, 컴포넌트들을 등록하여 상태 변화가 감지되면 컴포넌트를 렌더링하는 모델들이 고안이 되었다.
Publish-Subscribe 패턴
이러한 이벤트 기반의 상태 관리 시스템을 만드는데에는 Publish-Subscribe 패턴이 널리 쓰인다. Publish-Subscribe를 알아보기 전에, React 에서 가장 널리 쓰이는 전역 상태관리 라이브러리인 Redux 의 동작 과정에 대하여 살펴보자.
Redux의 동작 원리
- UI에서 이벤트가 발생(dispatch)되면, action을 동작시킨다.
- action은 해당 action과 연결된 reducer를 동작한다.
- reducer는 state를 동작시킨다.
- 업데이트된 state는 등록한 UI를 렌더링한다.
Redux는 대표적인 Publish-Subscribe패턴을 지키는 상태 관리 시스템이다. (정확히는 Flux 패턴, 즉 단방향으로 데이터의 흐름이 발생하는 패턴이다)
Publish-Subscribe 패턴은:
코드의 한 부분은 수신자(Subscriber)가 되고, 코드의 다른 한 부분은 발행자(Publisher)가 된다. 수신자는 이벤트를 발행자에 등록하고, 발행자의 상태가 변화하면 수신자는 그 결과를 받아볼 수 있게 된다.
이거 완전 addEventListner랑 같은데?
맞다. .addEventlistener(event, callback) 과 동일한 원리로 동작한다. 특정 이벤트에 어떤 함수를 구독하도록 만들고, DOM 요소에 의해 액션이 발행되면 그 함수가 호출된다는 것이다.
DOM의 이벤트 리스너는 UI액션을 발행하고 구독하는 정도에 불과하다. Promise 역시 우리가 미뤄둔 어떠한 액션이 완료되는 것을 구독할 수 있게 하고, 데이터가 준비되면 발행하는 것이다.
- 리액트의
state,props - 웹 소캣의
on() - fetch API
- 리덕스는 store의 변화를 구독
모두 하나의 Subscribe-Publish pattern이다.
어떠한 비동기 처리 방법을 사용하던지, 언제나 같은 변종일 뿐이다. 무언가는 구독을하고, 무언가는 발행을 한다.
마치며
현재 진행중인 과제에서 state를 전역 스토어로 관리하는 방법을 생각하고 있지만, 아직 무엇인가를 구현할 정도의 지식을 갖추지 못한 것 같아 앞으로 몇일동안 계속 찾아보려고 한다. 빠른 시일 내에 바닐라 자바스크립트로 publish-subscribe 모델을 구현해볼 수 있도록 해야겠다.
출처
[번역] 초보 프론트엔드 개발자들을 위한 Pub-Sub(Publish-Subscribe) 패턴을 알아보기 | rinae's devlog
