/
https://42jerrykim.github.io/ _index.md
Redux의 Reducer는 반드시 동기·순수해야 하지만, 실제 앱은 API 호출 같은 비동기 작업 없이 동작할 수 없습니다. Promise와 async/await의 동작 원리를 21–24편의 미들웨어를 이해하는 데 필요한 만큼 정리합니다.
실무 Redux 코드는 대부분 TypeScript로 작성됩니다. 기본 타입, 인터페이스, 제네릭을 Action과 State에 타입을 붙이는 데 필요한 만큼 정리하고, 28편(Redux와 TypeScript)의 기초를 다집니다.
Redux는 Facebook의 Flux 아키텍처를 단순화한 라이브러리입니다. 양방향 바인딩이 왜 대규모 앱에서 문제가 됐는지, 단방향 데이터 흐름이 그 문제를 어떻게 푸는지, Redux의 세 가지 원칙을 정리합니다.
Redux 코드의 90%는 Action, Reducer, Store 세 요소의 조합입니다. createStore로 순수 Redux 스토어를 직접 만들어보며, dispatch·subscribe·getState가 실제로 어떻게 맞물리는지 코드로 확인합니다.
리듀서에서 상태를 직접 변경하면 리렌더가 일어나지 않거나, Redux DevTools의 시간여행 디버깅이 무의미해집니다. 불변성이 왜 필요한지, 얕은 비교가 이를 어떻게 이용하는지 실제 버그 재현 코드로 확인합니다.
07편에서 만든 세 요소가 실제로 dispatch 한 번에 어떤 순서로 실행되는지 단계별로 추적합니다. 동기 흐름과 비동기 흐름을 구분해, DevTools로 각 단계를 실제로 관찰하는 방법까지 코드와 함께 다룹니다.
Redux를 만든 Dan Abramov조차 'You Might Not Need Redux'라고 말했습니다. Context API·Zustand 같은 대안과 비교해, 프로젝트 규모와 상태의 성격에 따라 언제 Redux를 쓰고 언제 피할지 판단 기준을 정리합니다.
Store만 있어도 React 컴포넌트에 연결하지 않으면 화면은 바뀌지 않습니다. Provider로 Store를 트리에 주입하고, connect 고차 컴포넌트로 컴포넌트와 Store를 잇는 원리를 이후 Hooks(12편)와 비교하며 다룹니다.
실무 Redux 코드는 대부분 connect 대신 useSelector와 useDispatch를 씁니다. 두 Hook의 동작 원리와, useSelector가 새 객체를 반환할 때 무한 리렌더가 발생하는 흔한 함정을 코드로 다룹니다.
구독 범위를 잘못 잡으면 상태 일부만 바뀌어도 앱 전체가 다시 그려집니다. 구독 범위 좁히기, React.memo, 리스트 컴포넌트 분리라는 세 가지 기법으로 불필요한 리렌더를 실측 가능한 수준까지 줄이는 방법을 다룹니다.