[React] Mobx 상태 관리 라이브러리

📚 Mobx ❓❓

👉 리액트에서 리덕스 이후로 많이 사용되는 상태 관리 라이브러리 ❗

간단하고 확장 가능한 상태 관리,
쉽고 확장성 있게 만들어주는 검증된 라이브러리

⭐특징 - 리덕스에 비해 깔끔하고 쉬움

1️⃣ 쉬움, 2️⃣ 렌더링 최적화를 쉽게 할 수 있음
3️⃣ 구조가 자유로움

---

⚡작동 원리

상태가 바뀌면 자동으로 관련된 화면(UI)이 업데이트 되도록 만들어줌

'이벤트'가 발생하면 '액션' --업데이트 해서-->
'관찰 가능한 State' --알린 다음에 notify-->
Computed Value( 어떠한 state 값 바꼈을 때 state에 의존하는 애들 )
-- 트리거( 어떤 일이 일어나면 자동으로 작동하는 신호 ) 발생 -->
Side-effects( 타이핑 칠 때마다 값이 바뀜으로 인해 리렌더링 되는 것 )

ex ) Recoil 에서 타이핑할 때 ㅇㄴㄹㄴㅇㄹㄴ ---> 7 ( text.length )
여기서 ㅇㄴㄹㄴㅇㄹㄴ 이게 Observable State고,
7 이게 Computed Values( text가 바뀜으로 인해 새롭게 계산이 되는 value )임

👩‍💻Mobx 이용해서 카운트 앱 만들기

📁바탕화면에 mobx-app 폴더 만들기

📥리액트 설치하기 : npx create-react-app ./

📥Mobx 설치하기 : npm install mobx

🙂리액트 실행하기 : npm run start

---

▫ src>CountStore.js

Mobx는 주로 '클래스'를 이용해서 클래스로 store 만들어줄 것

Observable( 관찰가능한 ) state
👉 함수형에서 useState 이용하는 거랑 비슷🙆‍♀️

예시로 first가 Observable( 관찰 가능한 state )한 state니까

이것처럼 얘도 Observable한 state로 count = 0 이렇게 해줄 것⭕

여기서 class 이니까 constructor( )를 만들어줌❗

constructor( )가 하는 일➡첨에 얘를 이용해서 객체를 만들 때
가장 먼저 호출 되는 게 이부분📢

주로 어떠한 필드들을 여기다 정의해주는데
지금은 Mobx를 사용하니까

어떠한 애는 observable한 state고, 어떠한 애는 computed한 애고,
어떠한 애는 action인지를 constructor( ) 함수 안에서 정의해주는 것🔥

makeObservable을 가져옴

먼저 this를 해주고 이 this는 CounterStore 클래스를 가리킴✔

count는 observable state 라고 말해주는거임

그리고 카운트 앱이니까 얘를 1씩 올려주는 메소드가 필요😎

🆙increase( ) 메소드 호출하면 count를 +1씩 증가시켜야함

🌫🐱‍🏍얘는 action임
action을 이용해야지 state를 업데이트 하는 거니까✨

그래서 increase는 action 이라고 정의해줌

+1씩 올리는 것도 있으니까 -1씩 내리는 것도 있어야함

✅increase랑 똑같이 observable한 state를 변경해주는 action인 것

decrease도 action 이라고 정의해줌

카운트가 양수일 땐 마이너스?: No가 나오고, 음수일 땐 Yes가 나옴

이 observable한 state가 변경됨에 따라

클래스( this ) 안에 있는 count가
0보다 크면( ➕ ) Yes가 뜨게 아니면 No가 뜨게 하는 부분임🤓

📥getter 같은 경우엔 리턴 해놓으면 이 값이 캐싱 되는 것

isNegative➡observable state가 바뀌는 거에 따라서 다른 값을 리턴하고 있음

isNegative는 computed values 🙆‍♀️
👉 this.count가 바뀌는 거에 따라 'Yes' : 'No' 다른 값을 리턴하기 때문❗

isNegative는 computed 라고 정의하면 됨

이렇게 하면 Mobx를 사용할 준비 완료된 것😉

📚리덕스 사용할 때도 redux library 설치하고
react-redux 라는 라이브러리도 설치했었음📥

이것처럼 현재 mobx를 설치했는데
mobx-react 라는 라이브러리도 설치해야함 🆗

📚mobx-react 라이브러리 설치하기

npm install mobx-react 설치하고 다시 실행 npm run start 하기

▫ src>index.js

가장 먼저 해줘야 하는 게 CounterStore 클래스를 index.js로 가지고 올 것

어떻게 사용할까❓➡'인스턴스 객체' 만들어야함🤓

🎆new 한담에 const store 라고 인스턴스를 생성해줌

🛒myCounter={store} 하고 store 내려주기

---

💻App.js UI 만들기

▫ src>App.js

App.js로 넘어와서 이런 UI를 먼저 만들어주자

⬇

카운트: 여긴 CountStore.js 안에 만들어놓은 count가 와야되고
마이너스: isNegative가 와야되고
+ 버튼은 increase가 와야되고, - 버튼은 decrease가 와야함

그러면 이미 index.js 에서 store를 내려줬었음

App.js 에서 이걸 받아오려면 props 하고 const { myCounter } = props 해주면 됨🤓

👀콘솔로 확인해보자

이렇게 나오는 걸 확인할 수 있음

카운트는 초기값이 0이니까 0으로 잘 나오고 있고
마이너스는 카운트가 0( 양수 )이니까 No로 잘 나옴

그리고 이제 버튼을 눌렀을 때 쟤네들이 변경이 되게 해줘야함👌

+ 버튼은 increase 이부분인데

이게 왜 '포로토타입' 안에 들어가있는걸까❓

생성자 함수 이용했을 땐 포로토타입 안이 아닌 이쪽에 들어가고
create 포로토타입 이용할 땐 프로토타입 안으로 들어가는 것...🥴❓

⬇🖱 ➕/➖ 버튼 클릭해도 아무런 반응 없음 😕

실제로 값이 안 바뀌고 있는 거라 이럼
👉 store에 있는 값은 실제로 바뀌는데 이걸 아직 '구독'을 안 하고 있어서 이런 것⚡

🐍App 컴포넌트를 observer로 감싸기

⬇

observable한 state가 바꼈을 때 🔄이 컴포넌트를 다시 렌더링 하는 것💻

지금 observable한 state가 count 🙆‍♀️

이것들을 이용해서 count를 바꿔주고 있으니까

🧐그래서 이런식으로 App 컴포넌트를 관찰( observer )하고 있는거임✔