Featured image of post [Redux] 03. 배열과 객체 다루기 - map, filter, reduce

[Redux] 03. 배열과 객체 다루기 - map, filter, reduce

Redux의 selector와 리듀서는 map/filter/reduce 같은 고차 함수로 상태를 조회·변환합니다. 원본을 바꾸지 않는 배열·객체 메서드와 바꾸는 메서드를 명확히 구분해 불변성을 지키는 습관을 코드로 다룹니다.

Featured image of post [Redux] 04. 비동기 JavaScript - Promise와 async/await

[Redux] 04. 비동기 JavaScript - Promise와 async/await

Redux의 Reducer는 반드시 동기·순수해야 하지만, 실제 앱은 API 호출 같은 비동기 작업 없이 동작할 수 없습니다. Promise와 async/await의 동작 원리를 21–24편의 미들웨어를 이해하는 데 필요한 만큼 정리합니다.

Featured image of post [Redux] 05. TypeScript 기초 - 타입 시스템 이해하기

[Redux] 05. TypeScript 기초 - 타입 시스템 이해하기

실무 Redux 코드는 대부분 TypeScript로 작성됩니다. 기본 타입, 인터페이스, 제네릭을 Action과 State에 타입을 붙이는 데 필요한 만큼 정리하고, 28편(Redux와 TypeScript)의 기초를 다집니다.

Featured image of post [Redux] 06. Redux란 무엇인가 - Flux 아키텍처와 상태 관리

[Redux] 06. Redux란 무엇인가 - Flux 아키텍처와 상태 관리

Redux는 Facebook의 Flux 아키텍처를 단순화한 라이브러리입니다. 양방향 바인딩이 왜 대규모 앱에서 문제가 됐는지, 단방향 데이터 흐름이 그 문제를 어떻게 푸는지, Redux의 세 가지 원칙을 정리합니다.

Featured image of post [Redux] 07. Redux의 핵심 - Action, Reducer, Store

[Redux] 07. Redux의 핵심 - Action, Reducer, Store

Redux 코드의 90%는 Action, Reducer, Store 세 요소의 조합입니다. createStore로 순수 Redux 스토어를 직접 만들어보며, dispatch·subscribe·getState가 실제로 어떻게 맞물리는지 코드로 확인합니다.

Featured image of post [Redux] 08. 불변성의 중요성 - Immutability in Redux

[Redux] 08. 불변성의 중요성 - Immutability in Redux

리듀서에서 상태를 직접 변경하면 리렌더가 일어나지 않거나, Redux DevTools의 시간여행 디버깅이 무의미해집니다. 불변성이 왜 필요한지, 얕은 비교가 이를 어떻게 이용하는지 실제 버그 재현 코드로 확인합니다.

Featured image of post [Redux] 09. Redux 데이터 흐름 이해하기

[Redux] 09. Redux 데이터 흐름 이해하기

07편에서 만든 세 요소가 실제로 dispatch 한 번에 어떤 순서로 실행되는지 단계별로 추적합니다. 동기 흐름과 비동기 흐름을 구분해, DevTools로 각 단계를 실제로 관찰하는 방법까지 코드와 함께 다룹니다.

Featured image of post [Redux] 10. Redux를 사용하는 이유와 적절한 사용 시기

[Redux] 10. Redux를 사용하는 이유와 적절한 사용 시기

Redux를 만든 Dan Abramov조차 'You Might Not Need Redux'라고 말했습니다. Context API·Zustand 같은 대안과 비교해, 프로젝트 규모와 상태의 성격에 따라 언제 Redux를 쓰고 언제 피할지 판단 기준을 정리합니다.

Featured image of post [Redux] 11. React-Redux 시작하기 - Provider와 connect

[Redux] 11. React-Redux 시작하기 - Provider와 connect

Store만 있어도 React 컴포넌트에 연결하지 않으면 화면은 바뀌지 않습니다. Provider로 Store를 트리에 주입하고, connect 고차 컴포넌트로 컴포넌트와 Store를 잇는 원리를 이후 Hooks(12편)와 비교하며 다룹니다.