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편)와 비교하며 다룹니다.

Featured image of post [Redux] 12. React-Redux Hooks - useSelector와 useDispatch

[Redux] 12. React-Redux Hooks - useSelector와 useDispatch

실무 Redux 코드는 대부분 connect 대신 useSelector와 useDispatch를 씁니다. 두 Hook의 동작 원리와, useSelector가 새 객체를 반환할 때 무한 리렌더가 발생하는 흔한 함정을 코드로 다룹니다.

Featured image of post [Redux] 13. 컴포넌트 최적화 - 리렌더링 제어

[Redux] 13. 컴포넌트 최적화 - 리렌더링 제어

구독 범위를 잘못 잡으면 상태 일부만 바뀌어도 앱 전체가 다시 그려집니다. 구독 범위 좁히기, React.memo, 리스트 컴포넌트 분리라는 세 가지 기법으로 불필요한 리렌더를 실측 가능한 수준까지 줄이는 방법을 다룹니다.

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로 중복 요청을 막는 방법까지 다룹니다.