상태관리와 리덕스에 대해..

상태관리란?

• 상태관리는 쉽게 말해 전역 데이터 관리이다.
• 렌더링과 연결된 데이터를 형제나 부모와 자식 컴포넌트끼리 주고 받기는 생각보다 까다롭다.
  • 형제 컴포넌트끼리 데이터를 주고 받으려면?
    1. 부모 컴포넌트에서 state를 생성하고 자식 컴포넌트들에게 props로 데이터와 state를 변경할 함수를 넘겨준다.
    2. 자식 컴포넌트에서는 props로 받아온 값을 참조해서 쓰고, 값 변경이 필요한 경우는 넘겨받은 함수로 해당 값을 변경해준다.
    3. 만약 1촌 관계 컴포넌트가 아니라 6촌 관계 컴포넌트가 같은 데이터를 사용하려고 한다면?
       • props를 6단계 이상 걸쳐서 넘겨줘야한다;; 🤢
• 이런 번거로움을 줄여주기 위해 전역 데이터를 만들고 관리해주는 게 상태관리이다.

많이 사용되는 상태관리 툴

• ContextAPI()
• Redux
• Recoil
• zustand
• react-query
• mobx

전역 저장소는 필요하지 않을 수 있다.

• 흔히 말하는 상태 관리는 어디서든 접근할 수 있는 데이터 모음을 만들어두고, 어떤 컴포넌트 건 데이터를 꺼내서 보고 수정 요청을 보낼 수 있는, 전역 저장소 개념이다.
• 내 프로젝트는 컴포넌트간 데이터가 오갈 일이 많지 않다면 전역 저장소는 필요 없다!!
  → 모든 프로젝트에 상태관리가 필요하지 않다!

리덕스가 무겁다는 말이 많은데?

리덕스 장점

• state를 쉽게 관리할 수 있다.
• 어떤 액션이 취해졌고, 어떤 데이터가 변경되었는지 쉽게 알 수 있다.
• 단방향 모델링→ 단방향이란 것은 한 가지 방향으로만 바뀔 수 있다는 것이다.
• 단방향의 장점으로 action을 dispatch 할 때마다, history(기록)이 남아서 에러를 찾아낼 때 엄청 편하다. 에러 또한 적게 난다.
  또한, 기록이 리스트화 되어 있어서 time machine(타임머신) 기능을 사용할 수 있다.

리덕스 단점 ㅜㅜ

• 그냥 러닝 커브가 많이 높다
• 아주 작은 기능이여도 리덕스로 구현하는 순간 몇 개의 파일(액션등을 미리 만들어놔야함)들을 필수로 만들어야하여 코드량이 늘어난다.
  → 보일러플레이트 코드를 많이 준비해야함.. 생각보다 많이 복잡함!!
• Redux는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어주지는 않는다.
  때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해야 한다. 이를 예방하기 위해 Immutable.js같은 라이브러리도 존재한다.
• 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있기에 매번 state라는 객체를 생성해야 한다
• 단순히 글로벌 상태를 사용하고자 한다면 리액트의 Context API나 부모 자식간 props 교환으로 충분히 구현을 할 수 있다.

 ”리덕스 사용이 과연 프로젝트를 나이스하게 만들어줄까?”에 관한 고민은 아주아주 오래 이어져왔다.
만약, 아래의 경우에 해당한다면 가차없이 다른 라이브러리를 택하자!

1. 페이지 간 공유할 데이터가 없는 경우
2. 페이지 이동 시 리패칭이 잦게 일어날 경우
3. 비즈니스 로직이 획일화되기 어려울 경우
4. 단순 글로벌 상태관리를 사용하고자 할 때