unstated로 react 해보기 (2)
지난번 내용이 이상해서 다시 써봤습니다;
지난번 글을 다시 읽어보니 영 어색하더라고요; 그래서 예제도 다시 만들고 정리도 다시 해보려고 합니다.
unstated는 아주 쉽게 설명하면 react의 전역 상태 관리자 인데요..
이것만으로는 unstated의 매력이 다 전달되지 않아서 글을 쓰게 되었습니다.
사실 unstated에는 요런 매력이 있습니다.
- 먼저 Component를 분리해서
state와 function을 Container,
render()를 Subscribe라고 합니다. - Container와 Subscribe는 서로
정말 자유롭게 결합될 수 있습니다. - 그리고 같은 Subscribe 내에서
서로 다른 Container가 서로 연결될 수도 있습니다. - Container는 알아서 전역적으로 만들어져
Subscribe들에게 알아서 주입됩니다.
순서대로 하나씩 보겠습니다.
예제 1: 더하기 버튼, 빼기 버튼을 누를 때마다
값이 1씩 더해지고 빼지는 앱을 만들어볼게요.
1. 먼저 Component를 분리해서
state와 function을 Container,
render()를 subscribe라고 합니다.
하나의 Component가 AddContainer와 AddASubscribe로 분리된걸 어렵지 않게 알 수 있습니다. 여기서 포인트는 AddA의 #7인데요, <Subscribe>를 통해 둘이 연결되었다고 지금은 감각적으로 이해해 주세요.
2. Container와 Subscribe는 서로 정말 자유롭게 결합될 수 있습니다.
위에 있었던 AddContainer를 AddBSubscribe에서도 사용하고 있습니다. 이렇게 1:n 관계로도 자유롭게 결합될 수 있습니다.
덕분에 이제 AddB에서 더하기 버튼, 빼기 버튼을 누르면 AddA에서 달라지는 값을 확인할 수 있습니다.
이렇게 예제 1을 완성한 것 같습니다. 그럼 예제 2를 해볼까요?
예제 2: 추가하기 버튼을 누를 때마다
현재 값을 리스트에 추가하는 앱을 만들어 볼게요.
3. 그리고 같은 Subscribe 내에서
서로 다른 Container가 서로 연결될 수도 있습니다.
지금부터가 좀 재미있는데요..
ListSubscribe의 #14를 보시면, list.addList()를 호출할 때 add.state.value를 참고하는걸 확인할 수 있습니다. 이렇게 n:1의 관계로도 Container와 Subscribe가 결합될 수 있습니다.
react의 Component는 매우 self-contained한 구조인데요, Container와 Subscribe를 분리하는 것으로 이렇게 느슨하게 연결된 방식으로도 개발이 가능해집니다.
4. Container는 알아서 전역적으로 만들어져
Subscribe들에게 알아서 주입됩니다.
끝으로 Provider라는 개념이 있는데요
App.js를 보시면 <Provider>로 감싸져있는걸 볼 수 있습니다. 마치 Spring의 의존성 주입Dependency Injection처럼 <Provider>scope 내에서 Container 객체들을 만들어 이하 Subscribe들에게 주입시켜주게 됩니다.
그래서 여러 Subscribe들은 같은 Container를 공유하게 됩니다. (정확히는 전역적은 아니지만 이해를 돕기 위해 썼습니다.) 이제 1번에서 감각적으로 이해했던 부분이 이해되셨으면 좋겠습니다. 이상입니다.
전체 코드는 깃헙에 올려 두었습니다. 참고가 되신다면 좋겠습니다.
읽어주셔서 감사합니다! 🙂🙂🥰🙂
