Redux
1.[Redux] 리덕스란 무엇인가?
리엑트 개발을 연습해오면서 컴포넌트도 중요한 개념이지만 동시에 많아지는 상태를 어떻게 효율적으로 관리해야하는지도 리엑트 개발자가 되려면 매우 고민하고 신경써야하는 부분인것 같다.내가 그동안 관리 했던 메커니즘은 리엑트에서 제공하는 ContextAPI를 사용하여 전역에서
2.[Redux] 핵심 리덕스 개념 탐색
그렇다면 본격적으로 리덕스에 대해서 그 구조와 설정을 진행해보자.우선 vscode에 리엑트 앱이 아닌 자바스크립트 파일을 생성하고 기본적인 npm 패키지를 추가해주어 준비한다.npm init -y그리고 리덕스 라이브러리를 설치해준다.npm install redux그다음
3.[Redux] Redux Toolkit 적용하기
Toolkit이 나온 배경 프로젝트가 더 복잡해지면서 리덕스의 사용성도 복잡해지기 마련이다. 즉, 리덕스에서 관리해야할 상태들이 점점 더 많아질때를 의미한다. 가장 크게 두드러지는 부분은 1. Action type : 리듀서에서 받는 엑션의 타입의 식별 형태가 여
4.[Redux] Redux의 비동기코드 구현
이제 해당 전역 상태관리를 Redux/Toolkit을 적용하여 사용까지 해보는것을 연습했다. 그럴때 이제 해당 상태를 유연하게 서버와 통신하고, 그것에 대한 응답으로 화면에 렌더링을 하거나, 여러 인터렉션을 통한 페이지 전환 등 다양한 동작을 실현하기 위해서 추가적으
5.[Redux] 리덕스로 비동기 코드 구현하기 2
비동기 코드구현에 이어서 Thunk를 생성했고, 해당 프로젝트가 로드될때 cart데이터를 서버로 부터 가져오는 걸 적용해 보자. 데이터 가져오기(Fetch) 현재 앱에서는 로드될때 데이터를 패칭하지 않아서 리로드하게되면 모든 상태가 손실되어 있게된다. 따라서 데이터 fetching하는 비동기 로직도 추가로 생성해야한다. 현재 cartSlice의 파일...
6.[Redux] 리덕스 devtools
리덕스를 사용하며 리덕스 상태를 좀 더 쉽게 디버깅 할 수 있도록 도와주는 툴이 있다.바로 Redux Devtools 이다.프로젝트를 개발하면서 많은 리덕스 상태가 여러 다른 슬라이스로 처리되며 다양한 엑션이 진행되는 복잡한 애플리케이션에선 엑션등의 디버그 상태에서 오