Featured image of post [Redux] 14. 데이터 선택자 - Selector 패턴

[Redux] 14. 데이터 선택자 - Selector 패턴

필터링·정렬 같은 파생 데이터 계산을 컴포넌트 안에 직접 쓰면 매 렌더링마다 다시 계산됩니다. Reselect의 createSelector로 입력이 바뀔 때만 재계산하는 메모이제이션 selector를 만드는 방법을 다룹니다.

Featured image of post [Redux] 15. 실습: Counter와 Todo 앱 만들기

[Redux] 15. 실습: Counter와 Todo 앱 만들기

06–14편에서 배운 Action·Reducer·Store·useSelector·useDispatch·createSelector를 하나로 엮어 Counter와 Todo 앱을 처음부터 끝까지 만듭니다. Phase 3을 마치는 종합 실습입니다.

Featured image of post [Redux] 16. Redux Toolkit 소개 - 왜 RTK인가?

[Redux] 16. Redux Toolkit 소개 - 왜 RTK인가?

15편에서 만든 순수 Redux 코드는 액션 타입 문자열 중복, 불변 업데이트 보일러플레이트 같은 반복이 많습니다. Redux 공식 팀이 만든 Redux Toolkit이 이 문제를 어떻게 해결하는지, 무엇이 달라지는지 다룹니다.

Featured image of post [Redux] 17. createSlice - 간결한 리듀서 작성

[Redux] 17. createSlice - 간결한 리듀서 작성

createSlice의 name·initialState·reducers 세 필드가 액션 타입, 액션 생성자, 리듀서를 어떻게 자동 생성하는지 15편의 counterSlice·todosSlice를 실제로 다시 작성하며 확인합니다. extraReducers도 함께 다룹니다.

Featured image of post [Redux] 18. configureStore - Store 설정 자동화

[Redux] 18. configureStore - Store 설정 자동화

07편의 createStore+combineReducers+applyMiddleware 조합을 configureStore 한 번의 호출로 대체합니다. 개발 환경 검사 미들웨어와 DevTools 연결은 물론, preloadedState로 SSR·영속화된 초기 상태를 주입하는 방법까지 다룹니다.

Featured image of post [Redux] 19. createAsyncThunk - 비동기 로직 단순화

[Redux] 19. createAsyncThunk - 비동기 로직 단순화

09편에서 손으로 만들었던 시작·성공·실패 세 액션과 04편의 async/await를 createAsyncThunk 하나로 대체합니다. extraReducers의 pending/fulfilled/rejected 케이스, unwrap, condition/signal로 중복 요청을 막는 방법까지 다룹니다.

Featured image of post [Redux] 20. 실습: RTK로 앱 리팩터링

[Redux] 20. 실습: RTK로 앱 리팩터링

15편의 순수 Redux Counter/Todo 앱을 createSlice·configureStore·createAsyncThunk로 완전히 다시 작성합니다. 코드량 비교와 함께 Phase 4를 마무리하는 종합 실습입니다.

Featured image of post [Redux] 21. Redux 미들웨어의 이해

[Redux] 21. Redux 미들웨어의 이해

09편에서 간단히 본 미들웨어의 next(action) 체인 구조를 직접 손으로 만든 로깅·타이밍 미들웨어로 분해합니다. 미들웨어가 왜 Thunk·Saga·RTK Query 같은 비동기 도구의 공통 기반인지 설명합니다.

Featured image of post [Redux] 22. Redux Thunk - 가장 간단한 비동기 처리

[Redux] 22. Redux Thunk - 가장 간단한 비동기 처리

21편의 미들웨어 구조 위에서 redux-thunk가 정확히 무엇을 하는지 직접 구현해봅니다. thunk 함수가 action 대신 dispatch되는 원리, getState로 조건부 dispatch하는 패턴, extraArgument로 API 클라이언트를 주입하는 방법을 다룹니다.

Featured image of post [Redux] 23. Redux Saga - 강력한 사이드 이펙트 관리

[Redux] 23. Redux Saga - 강력한 사이드 이펙트 관리

제너레이터 함수와 yield로 사이드 이펙트를 선언적으로 기술하는 Redux Saga를 다룹니다. take·call·put·select 기본 이펙트와, all·race·fork·cancel로 동시 실행·경쟁·백그라운드 취소를 구현하는 방법을 코드로 다룹니다.