FE/Redux 3

[Redux toolkit] Redux-thunk를 이용하여 비동기 처리하기

React 프로젝트를 진행 중, 비동기 처리의 결과값을 전역적으로 관리하며 사용해야하는 경우가 생겼다. 그래서 redux-thunk를 도입하게 되었다. redux-thunk에 대해 정리하고, 예제 코드를 살펴보자! 1. Redux-thunk를 사용하는이유 ? - 기본 Redux는 간단한 동기적인 처리만 업데이트 할 수 있다. - 하지만 store에 aceess해야하는 복잡한 동기처리나, AJAX요청과 같은 비동기 처리 같은경우 권장되는 미들웨어이다! - Redux 앱에서 비동기 로직을 작성하기 위한 표준 접근 방식이며, 일반적으로 데이터 가져오기에 사용된다. 2. thunk라는 단어의 의미는 ? - 일부 지연된 작업을 수행하는 코드 조각 을 의미하는 프로그래밍 용어 Redux-toolkit 개념을 모르신..

FE/Redux 2022.07.15

[Redux Toolkit] 리덕스 툴킷에 대한 개념공부하기

리덕스만으로도 정말 좋은 라이브러리지만 문제점이 있었다! 리덕스의 문제점은 ? 1. 리덕스 스토어 환경 설정이 너무 복잡 2. 리덕스는 보일러플레이트 (어떤일을 하기전 반복하여 작성하는 코드들)이 너무 많다. 3. 리덕스를 유용하게 사용하려면 많은 패키지들을 추가해야한다. 4. 불변성유지의 어려움 이런 이슈들을 해결하기 위해 Redux Toolkit이 등장한다. 리덕스툴킷을 이용하면 리덕스 툴킷을 들어가기 앞서서 아래 3가지를 비교해보자 Redux React Redux Redux toolkit createStore subscribe getState dispatch connecct useDispatch useSeletor configuerStore createSlice createAsyncThunk 기존에..

FE/Redux 2022.07.12

[Redux] 리덕스의 개념을 잡아보자!!

리덕스 (Redux) 란? - 리액트에서 가장 많이 사용하는 상태 관리 라이브러리이다. - 주의해야 할 점은 , react만을 위한 라이브러리는 아니다. - useState와 마찬가지로 변하는 값들을 관리해주는 관리 시스템이다. - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리가 가능하다. - 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 값을 전달, 업데이트 할 수 있다. Redux flow는 어떻게 될까? 1. 하나의 중앙 데이터(state) store을 갖는다. 2. 상태값을 바뀔 때마다 데이터들의 state 값을 수정해줄 reducer 함수를 만든다. 3. dispatch를 사용하여 reducer에게 state 값을 수정하라고(action 값을..

FE/Redux 2022.06.17