Stacks/Redux

[Redux] redux-toolkit 폴더 구조 / 비동기처리 - createAsyncThunk 사용법

✔️ Redux folder structure https://redux.js.org/style-guide/#structure-files-as-feature-folders-with-single-file-logic 리덕스 공식문서에서 추천하는 폴더구조가 있어서 이 방법을 참고해 셋팅을 해보았다. features 라는 폴더에 기능단위로 컴포넌트와 로직을 담당하는 Slice 가 같이 위치한다. 지난 프로젝트에서 디렉토리 구조를 신경쓰지 않고 진행했다가 몽땅 갈아엎는 대참사를 경험한 뒤로 초기셋팅에서 폴더 구조에 신경을 많이 쓰게되는 것 같다. 정해진 정답이 딱 있지 않아서 가능한 많이 참고하고 고민하고 적용해보는 시도가 필요할 것 같다. 이러한 구조에서는 동작을 담당하는 Slice 에 많이 의존하게 되는 것 같..

[Redux] React-Redux 라이브러리 : Counter 예제만들기

오늘은 리액트와 리덕스를 함께 사용할 때 권장되는 공식 라이브러리인 react-redux 라이브러리를 알아보고, 이를 사용해 간단한 카운터 예제를 만들도록 하겠다. Redux 에 대한 내용은 아래 포스팅을 통해 정리해두었다. [Redux] 상태관리 라이브러리 : Redux 원리 살펴보기 🤔리덕스란 무엇인가? 자바스크립트에서 상태관리를 할 수 있는 라이브러리로, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. friedegg556.tistory.com 🤔react-redux 라이브러리란 무엇인가? 리덕스는 독립적인 라이브러리로 여러 UI 라이브러리 혹은 프레임워크와 함께 사용할 수 있는데, 예시로 Vue, Angular, Ember, React 그리..

[Redux] 상태관리 라이브러리 : Redux 원리 살펴보기

🤔리덕스란 무엇인가? 자바스크립트에서 상태관리를 할 수 있는 라이브러리로, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. 특히 리액트 프로젝트에서 많이 사용되지만, 리액트와는 독립적인 라이브러리로 바닐라 자바스크립트에서도 사용할 수 있다. 리액트에서 컴포넌트 단위로 코드를 작성하고, 컴포넌트 안에서 상태가 존재한다면 여러 컴포넌트에서 해당 상태에 접근하기 위해 필연적으로 props drilling 이 일어날 수밖에 없다. 이는 코드의 복잡성을 증가시키고 그렇기 때문에 유지보수가 어렵고 앱의 동작을 예측하기 힘들어진다. 리덕스에서는 상태와 컴포넌트 구조를 분리시킴으로써 상태가 업데이트되는 흐름을 추적하기 쉽게 하고, 결과적으로 컴포넌트를 구성하는 ..