📌Redux

중앙 state관리소를 사용 할 수 있게 도와주는 패키지
=> 전역상태 관리 라이브러리

참고 개념

1. Global state
   중앙 state 관리소 = store에서 생성한 state

2. Local state
   useState를 이용해서 생성한 state

필요성

간단하게 말하면 props-drilling등의 불편함을 없애기 위해

1. 상태 로직의 중앙화와 일관성
   중앙에서 관리되어 더 일관성 있고 예측 가능한 상태 변경 가능

2. 성능 최적화 : 불필요한 리렌더링 방지
   Context API
   - Provider하위의 모든 컴포넌트를 리렌더링하게 할 수 있음
   Redux
   - 상태 변경시 관련된 컴포넌트만 선택적으로 업데이트
   - 모든 상태 변경 로직이 reducer에 의해 처리 : 디버깅, 테스팅 용이

❓reducer
state 관리를 하기 위한 로직들로 만들어진 집합

3. 강력한 미들웨어와 개발도구
   • 비동기작업, 로깅, 상태 변경에 대한 추가 처리 등 복잡한 기능 구현
   • Redux DevTools와 같은 강력한 개발 도구를 통해 상태 변화를 시각적으로 모니터링 하고 이전 상태로 롤백하는 등의 기능 제공

요약 : redux쓰면 엄청 좋다

---

Redux 사용

Redux(기존의 Redux)

1. 설치

   • redux와 react-redux를 동시 설치
     yarn add redux react-redux
   • package.json에서 설치 여부 확인

2. 폴더 구성

   • redux : redux 설정과 관련된 파일
   • modules : state들의 그룹을 묶어 놓음
   • configStore.js : Store를 만드는 설정 코드

src/
|-- redux/
|   |-- config/
|   |     |-- configStore.js
|   |
|   |-- modules/
|         |-- (ex:counter, todos, users).js
|   
|-- components/
|-- App.jsx
|-- main.jsx

3. 사용법
   정리 중 ...

❓Ducks 패턴

Redux앱을 구성할 때 사용하는 방법론 중 하나

액션 타입, 액션 생성자, 리듀서를 하나의 파일로 구성하는 방식

1. Reducer함수를 export default를 한다
2. Action Creator 함수들을 export 한다
3. Action type은 app/reducer/ACTION_TYPE 형태로 작성한다

Redux Tool Kit (RTK)

Redux를 개량한 것

1. 설치
   • redux와 react-redux를 동시 설치
     yarn add @reduxjs/toolkit
   • package.json에서 설치 여부 확인
2. 폴더 구성
   • slices : reducer를 만들고 내보냄

src/
|-- redux/
|   |-- config/
|   |     |-- configStore.js
|   |
|   |-- slices/ //변화된 부분
|         |-- (ex:todosSlice ).js
|   
|-- components/
|-- App.jsx
|-- main.jsx

3. 사용법
   정리중 ...

---

관련 용어

action

• type이란 key를 가져야 하는 객체
• reducer로 보낼 명령
• type의 value는 대문자로 작성
  (JS에서 상수는 대문자로 작성하는 rule!)

dispatch

• action 객체를 reducer로 보내는 전달자 함수
• useDispatch()라는 hook 사용
• store의 내장함수 중 하나

reducer

• dispatch를 통해 전달받은 action객체를 검사하고 조건이 일치 했을 때 새로운 상태값을 만듦
• 즉, 변화를 만들어 내는 함수

---

참고자료

코딩애플-Redux

코딩알려주는누나-ToolKit

스파르타코딩클럽 React숙련 강의