프론트에서 데이터 전달, 이벤트 처리 등 어플리케이션에서 다양한 동작을 제어 하기 위해 상태를 사용한다.

현재 사용하는 React에서 상태는 화면을 렌더링하는데 큰 영향을 미치는 요소이다. 따라서 리액트 자체적으로 state를 관리 할 수 있으며, 관련 다양한 라이브러리가 제공되고 있다.

• 클래스형 컴포넌트, this.state
• hooks, useState useReducer useContext
• Redux
• Recoil
• Mobx
• 등등...

상태를 어떻게 관리 할 것인가?

현재 프로젝트에서는 상태 관리를 위해 Mobx를 사용하기로 하였다.

Redux를 사용하지 않은 것은 Redux의 상대적으로 높은 러닝커브 때문이다.

그래서 Mobx가 상태 관리를 해주는 라이브러리이니 '어플리케이션의 모든 상태를 Mobx로 관리 할 것인가?'

가계부 입력과 수정 같은 경우 같은 유형의 상태를 상태를 쓸 때 중복 처리

에 대한 의문을 가지게 되었다. 여기에서 현재까지 도출한 의견

1. 대부분의 상태를 Mobx로 관리하자

   모달 visible 같은 짜잘한(?)것은 제외.

2. 컴포넌트간의 교류가 필요한 데이터만을 Mobx로 관리하자. 그 이외에 단일 컴포넌트에서 사용할 것은 그 안에서 알아서 선언해서 사용하자.

대부분 상태를 Mobx(상태 관리 라이브러리) 관리하자

장점

• 프로젝트에 상태가 전역으로 있어서 필요에 따라 연결만 하면 된다.

• 상태 관련 로직이 분리되어 있기 때문에 관리가 용이 할 수 있다.

• 기존 state 사용으로 재사용성 증가.

• 클래스로 관리를 한다면, State와 그 State에 연관된 메서드가 무엇인지 한 번에 알 수 있다.

  → 관리가 편해진다.

단점

• state도 결국 메모리 자원으로 선언 한 만큼 메모리를 잡아먹는다.
• 리프래쉬 하지 않는 이상 상태가 유지 되기 때문에 reset 같은 연산에 신경을 써야 한다.
• 엉뚱한 state로 인한 사이드 이펙트 발생 가능성이 있다.

궁금한 점

• 메모리를 엄청 많이 잡아먹을 것 같지는 않은데, 메모리 관점에서의 단점이 큰 단점일까?
  • 큰 메모리를 잡아먹지는 않더라도, 메모리 관점에서 고려를 하는 건 좋은 것 같다.