[TIL] 전역상태관리 심화 (Redux) (24.02.01 - 35일차)

git reset —hard

git add . 한다음에 git rest —hard

하면 최근에 pull한 이후로의 커밋기록을 싹날림

이렇게하고 최근 풀 다시 땡겨서 수업 들어도 될듯.

Redux

----  

redux 설치방법

  npm install @reduxjs/toolkit
    
  npm install react-redux

props drilling은 (트리구조 떠올리자) 상태를 중간에서 받아주는 애들도 리렌더링이 전부 일어날수있는 단점..

Redux

Store에서 상태를 관리.

받아오기 - 줘 하면 줌

수정이 좀 복잡함 -

공장, 작업지시서, 우체부

공장 - 우리가 받는 작업지시서 종류 (1번 해줄수있고, 2번… 3번..등)

1. 상태 데이터 저장소 및 관리하는곳 ⇒ `Store`
2. 변경은 공장에서  `Reducer`
3. 아무거나 받는게 아니라 ,받아주는 작업명(작업지시서)을 적어놓음.
    즉, 작업지시서가 `Action`
        
     그리고 이전상태도 받아야함. `state`
        
4. 작업지시서를 이제 써야겠지? 요청하는 곳에서 쓴다. (무슨 작업해줘) `Action Creator` 를 만들어서 쓰자.
    1. 작업명 `Action Type`
    2. 작업을 해야하는데 정보가 더 필요할때의 그 데이터정보  `Payload`
5. 전달 (우체부를 통해)  우체부이자 전달하는 행위를 `dispatch`라고 함  
    ⇒ useDispatch() 사용
    

“단방향 데이터 흐름”이라고함 (디버깅 및 책임소재 찾기가 쉽다)

카운팅이

1씩 증가하는게 아니라 원하는 숫자를 받아서 증가시키는 코드로 바꾸기

=> 공장한테 N을 줘야지

⇒ 그럼 Payload 활용하자

useSelector

---

프로젝트가 커질수록 공장, 이 reducer도 굉장히 많아진다.

• app.js에서 Provider를 브라우저라우터 밖에 감쌋는데그럼 App컴포넌트자체는 못쓰는거다? ⇒ 안에서부터 쓸수있다… ⇒ 따라서 이런경우에 index.js로 가서 App컴포넌트 바깥에 Provider를 씌워준다.

또 다른 전역 상태관리 라이브러리

---

zustand

Recoil

React query

=> 리액트쿼리는 리덕스의 기능상의 inhance를 위해 나옴

클라이언트 사이드에서의 정보 e.g. 스크롤정보

서버상태와 일치해야하는 정보(동기화하는데에만 관심을 가지겠다)

Query를 날려서

redux에서는 또 fetch를 해서 가져와야하는데

query는 자동화가 되어잇음 (동기화면에서)

요즘은 상태관리를 이원화해서 표현

• Redux는

리액트쿼리만으로만으로 불편하거나 할때

⇒ 클라이언트 상태관리를 한다.

• 리액트 쿼리
  => 서버사이드 상태관리