본문 바로가기

Redux3

Redux와 RTK로 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법은 다양합니다. React가 공식적으로 제공하는 Context API부터, 얼마전에 소개했던 Zustand 등 수많은 라이브러리들이 있습니다. 오늘은 그중에서도, 꽤 오랜 시간 사용되어 온 Redux와 RTK에 대해 알아보겠습니다. Redux Redux는 Flux 패턴을 따라가는 상태 컨테이너입니다. Dispatcher의 Action를 통해 Store의 상태를 변화시키고, 이 상태가 다시 View에 차례대로 반영되는 단방향 구조가 Flux 패턴의 핵심입니다. 이러한 구조로 만들어진 컨테이너를 활용하여 쉽게 데이터를 집약하고, 일관성 있게 관리할 수 있다는 것이 바로 Redux의 장점입니다. 예시를 통해 React에서 Redux를 사용하는 방법에 대해 알아보.. 2024. 3. 3.
react 프로젝트에 redux 적용하기 #2 지난 react 프로젝트에 redux 적용하기 #1에서는 리덕스가 적용되는 대략적인 구조를 만들었습니다. 그러나 앞으로 우리가 해야할 작업은 이것만으로 충분하지 않았습니다. 오늘은 비동기 작업을 위해 리덕스 청크(redux-thunk)를 이용하여 요청을 처리해보겠습니다. 리덕스 청크란 리덕스 미들웨어의 한 종류입니다. 간단한 동기 작업만이 가능한 리덕스에 비동기 작업이나, 웹 요청, 또는 저장소에 접근하는 복잡한 요청 등을 처리해주는 고마운 친구입니다. 우리는 오늘 이 고마운 친구와 함께 비동기 작업을 수행해 볼 예정입니다. 그럼 시작하겠습니다. 시작 우선 가장 문제가 되는 비동기 작업부터 처리해보겠습니다. 우리가 비동기 요청을 보냈을때의 상태를 구분해보면 세 가지가 있습니다. 1. 요청을 보내지 않았거.. 2020. 10. 2.
react 프로젝트에 redux 적용하기 #1 이번에 진행중인 토이 프로젝트에서 상태관리 라이브러리인 redux를 적용하게 되었습니다. 문제는 아직 한 번도 사용해본적이 없는 라이브러리이기에 실전에 앞서 redux가 어떤 방식으로 동작하는지, 어떻게 적용시키야 하는지 알아보기 위해 기존에 있던 react 프로젝트를 redux를 이용한 구조로 바꾸는 튜토리얼을 진행해보려고 합니다. 리팩토링 할 대상은 지난번 리액트 튜토리얼을 진행했던 무비앱. 이 리액트 프로젝트를 redux를 이용한 프로젝트로 탈바꿈 시켜보는게 오늘의 목표입니다. 막상 진행하려고 하니 정말 아무것도 모르는 제로 베이스 상태였기 때문에 유튜브에 올려져있는 벨로퍼트(김민준)님의 강좌를 참고하였습니다. 우선 기존 레파지토리를 남기고 새 프로젝트에서 작업을 시작하기 위해 새 저장소를 생성하겠.. 2020. 9. 16.