(21.09.09) 상태관리에 관하여 (feat. react.state && mobx)

작은 지식이라도, 하루에 하나씩.

 

---

 

한 줄 요약

---

🦄React.state든, mobx의 observable한 value든, 그 state가 변하게 되면 render가 다시 한번 실행된다.🦄

 

 

본문

---

이놈의 상태관리...진짜 사람 미치고 팔짝 뛰게한다.

 

오늘도 사수님께 피가되고 살이되는 지식을 다이렉트로 주입받았는데, 이건 썰로 풀기에는 너무 길어서 얻은 지식을 짧게 요약만 하도록 하겠다.

 

 

1. Mobx의 @observable와 React.state
   1. 둘 다 기본적으로 변화가 생긴다면, 페이지 전체에서 다시 render를 실행시킨다
      1. 그렇기 때문에 가급적이면 render 부에 너무 많은 variable / function들을 넣으면 안된다. 클래스 멤버/ 메서드와는 다르게 매 render마다 다시 메모리에 할당되고 실행되므로 runtime 에 많은 부담이 된다
2. Mobx의 @observer와 @obserable의 관계
   1. Mobx는 observable한 프로퍼티(== 클래스 멤버)를 쌓아놓는 class를 store라고 이름 붙여서 쓴다
      
      1. 아직까지는 mobx를 이러한 패턴으로 설계하는 것 밖에 보지 못했다. 그러나, 자유도가 높은 mobx인 만큼, 다른 패턴 역시 존재할 것이라고 생각된다
   2. 그런데, 이 store의 변화를 감지하려면 클래스에 @observer 데코레이터를 사용해야지 observable들의 변화에 따라 다시 render를 할 수 있다.
   3. @observer를 클래스에 달고, 그 클래스 안에서 new 생성자를 이용하여 store 인스턴스를 생성하여서 부모 자식의 연을 맺어야지 클래스 컴포넌트에서 store의 obserable 한 값들의 변화를 보고 관측할 수 있다.
   4. 부모 자식의 연을 맺지 않아도 클래스 컴포넌트 안에서 store를 생성할 수는 있으나,class에서 store의 @observable한 값들을 바꿔도 re-render가 일어나지 않는다.
      1. 놀랍게도 부모자식의 연을 맺지 않은 채로, store를 생성해도 에러가 나지 않는다!
   5. 따라서 @obserable한 value의 변화에 따라 페이지의 re-render (혹은 다른 동작)을 하게 하고 싶다면, 해당 클래스 컴포넌트에 @observer 데코레이터를 반드시 달아야한다.

 

 

 

결론

---

 

오늘 났던 에러가 @observer 하나 안 달아서 일어난 것이라는 뜻이다.