unstated로 react 해보기

react 해본 적 없는 사람이 이런 글 써도 되나;

참고: 아래 내용이 영 마음에 안 들어서 다시 써봤습니다.

unstated로 react 해보기 (2)

시작은 유튜브에서 본 추천 동영상 이었습니다.

redux 대신 다른걸 쓴다고? unstated? 근데 뭔가 쉬워보이는데? 해서 알아보게 되었습니다.

Unstated

<State so simple, it goes without saying>

• 쉽게 설명하면.. 데이터와 뷰를 분리해서 자유롭게 결합시킬 수 있습니다.
• react v16 context API의 Provider, Consumer 개념을 사용
• ‘React components are designed to be very self-contained.’
  -> 이런 리액트 컴포넌트의 state, render, 그리고 function을 분리합니다.
• render는 Subscribe로,
  state와 function은 Consumer로 표현합니다.
• Subscribe는 동시에 여러 Consumer를 받을 수 있고,
  Consumer는 동시에 여러 Subscribe에서 사용될 수 있습니다.
• 이를 통해 컴포넌트간의 통신이 가능하고,
  다른 방식의 개발이 가능합니다.

코드를 볼까요?
공홈에 있는게 약간 성에 안 차서 하나 만들어 봤습니다;

<unit 단위로 값을 더하거나 빼는 App 입니다.>

<Container: state와 function에 해당합니다.>

<Subscribe: view에 해당합니다.>

<Subscribe>를 통해 위의 두 Add.js가 서로 연결되었다고 눈치챌 수 있으면 좋겠습니다. 포인트는 #11과 #14인데요, AddContainer의 함수를 호출할 때 UnitContainer의 State를 참고하고 있습니다. props로 넘겨주는게 아니라요.. 이게 Unstated의 매력 같습니다.

엄밀하게 말하면 Global State Machine은 아니고, context API의 컴포넌트간의 통신을 응용해 view와 state, 그리고 function을 분리하고 자유롭게🥳 (하지만 간접적으로😢) 연결할 수 있다~ 인 것 같습니다. 코드를 조금 더 볼게요.

<별거 없는 Container>

<별거 없는 Subscribe>

Unit 부분은 정말 별거 없죠? Unit의 state.unit이 아까 Add의 Subscribe에서 사용된다~ 정도의 느낌입니다. 당연하지만, setState()가 되면 Add의 unit.state.unit도 바뀌게 됩니다. react니까요!ㅎㅎ 쪼끔 더 봅시다.

<또 다른 Subscribe>

아까 subscribe/Add를 보셨다면 이거도 금방 이해 되실거에요. 마지막으로 Provider의 모습을 보면 끝날 것 같습니다.

<App.js에서 Provider 역할을 해주고 있습니다.>

따로 미리 Container객체를 준비해서 <Provider inject={[foo]}>를 통해 주입시켜줄 수도 있고요, 특별히 만들지 않으면 Provider내에서 알아서 Container객체를 생성해서 이하 Subscribe들과 같이 공유하게 됩니다. 그래서 위의 <ViewSubscribe />, <AddSubscribe />, 그리고 <UnitSubscribe />들은 같은 state와 function을 서로 공유하며 사용하게 됩니다.

unstated는 redux의 대체재 라기보단.. 개발하는 방식 자체가 달라지게 될 것 같습니다. 어울리는 곳이 따로 있을 것 같아요. 읽어주셔서 감사합니다!
🙂🙂🙂