[URECA] Day 60 React Redux

📘 Redux란?

JavaScript 애플리케이션의 상태(state)를 관리하기 위한 라이브러리

애플리케이션의 상태를 하나의 스토어(store)에서 관리하고, 상태 변경은 액션(action)이라는 이벤트를 통해서만 이루진다.

Redux의 핵심 원칙

1. 단일 스토어(Single Source of Truth): 애플리케이션의 모든 상태는 하나의 스토어에 저장
2. 상태는 읽기 전용(State is Read-Only): 상태를 직접 변경할 수 없으며, 액션을 통해서만 변경 가능
3. 변경은 순수 함수로만(Changes are made with Pure Functions): **리듀서(Reducer)**라는 순수 함수가 이전 상태와 액션을 받아 새로운 상태를 반환

Redux의 핵심 구성 요소

1. 스토어(Store): 애플리케이션의 상태를 보관하는 객체
2. 액션(Action): 상태 변경을 위한 정보를 담고 있는 객체, type 속성은 필수
3. 리듀서(Reducer): 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수
4. 디스패치(Dispatch): 액션을 스토어에 보내는 함수
5. 구독(Subscribe): 스토어의 상태가 변경될 때 실행될 콜백 함수를 등록

• createSlice를 사용하여 액션과 리듀서를 한 번에 정의
• configureStore로 더 쉽게 스토어 설정

Redux 데이터 흐름

Redux는 단방향 데이터 흐름을 따른다.

1. 사용자가 UI와 상호작용
2. 상호작용에 따라 액션이 디스패치
3. 리듀서가 액션과 현재 상태를 바탕으로 새로운 상태를 생성
4. 스토어가 새로운 상태를 저장합
5. UI가 새로운 상태에 따라 업데이트

이해를 돕기 위한 간단한 다이어그램

사용자 인터랙션 → 액션 디스패치 → 리듀서 처리 → 스토어 업데이트 → UI 업데이트

 

⭐중요한 Redux 개념

1. 불변성(Immutability)

Redux Toolkit은 내부적으로 Immer 라이브러리를 사용하여, 마치 상태를 직접 변경하는 것처럼 코드를 작성할 수 있게 해준다.(state.todos = action.payload와 같이). 하지만 실제로는 불변성을 유지하면서 상태를 업데이트한다.

 

2. 비동기 작업 패턴

Redux에서 비동기 작업은 보통 세 가지 상태를 가진다.

• 진행 중(pending): 로딩 상태를 표시
• 성공(fulfilled): 데이터를 상태에 저장
• 실패(rejected): 오류를 상태에 저장

3. createAsyncThunk의 이점

• 비동기 작업에 대한 액션 타입을 자동으로 생성. (pending, fulfilled, rejected)자동으로 생성
• 로딩 상태와 오류 처리를 간소화
• 비동기 로직을 리듀서와 분리하여 관심사 분리를 촉진
  • 비동기 로직: API 호출하기, 데이터 가져오기 등
  • 상태 업데이트: 가져온 데이터로 상태를 어떻게 변경할지 결정하기

작동 방식 요약

1. 컴포넌트에서 dispatch(fetchTodos())를 호출하면
2. Redux는 fetchTodos.pending 액션을 디스패치하여 isLoading = true로 설정
3. 비동기 작업이 시작되고 API 호출이 이루어짐
4. API 호출이 성공하면 fetchTodos.fulfilled 액션이 디스패치되어 데이터가 상태에 저장
5. API 호출이 실패하면 fetchTodos.rejected 액션이 디스패치되어 오류가 상태에 저장

---

Redux를 사용하기 위해 패키지를 설치

npm install @reduxjs/toolkit react-redux

• react-redux: React와 Redux를 연결하는 라이브러리
• @reduxjs/toolkit: Redux 개발을 더 쉽게 만들어주는 도구 모음. 아래 라이브러리를 포함하고 있음
  • Redux 코어 라이브러리
  • Reselect (셀렉터 라이브러리)
  • Redux-thunk (비동기 작업을 위한 미들웨어)
  • Immer (불변성 관리 라이브러리)
  • 그 외 여러 유용한 유틸리티들

 

점심시간 잠안자기 셀프 챌린지 2일차

3일전부터 홈트를 시작했다. (두둥!)

3일전 회고에 적었듯 체력을 좀..빡시게 올려놔야할거같아서 러닝을 하려다가 포기했다.

운동을 포기할 순 없이니 홈트로 대체!

 

바로바로 땅끄부부-마라맛 운동 

얼마나 힘든지.. 3일차인 오늘 근육통으로 죽을맛.. 물론 어제도 근육통은 있었지만 

오늘은 더 심하다.. 앉았다 읽어나기가 넘나리 힘들다.

 

작심삼일이 되었으니 이제 새롭게 작심삼일을 해보겠다. 

 

요즘 또 블꾸에 빠져서.. 어제 하루종일 블꾸만했다.. 하하하하 공부할거 산더미인데

블꾸하니까 시간 금방간다.. 오늘도 하루종일 블꾸만했으니까.. 이젠 공부해야지

블꾸 내용도 정리해야징