개발에 도움이 되는/Redux (3) 썸네일형 리스트형 Redux Toolkit - Redux Toolkit Redux 표준 방식으로 만들어졌으며, 아래와 같이 세 가지 문제를 해결하기 위해 만들어졌다. 1) 기존 Redux Store 구성이 너무 복잡하다. 2) Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다. 3) Redux에는 너무 많은 상용구 코드가 필요하다. - 주요 API 1. configureStore() : Store를 구성하는 API로 Slice Reducer를 자동으로 결합하고, 제공하는 모든 Redux MiddleWare, redux-thunk, Redux DevTools Extension을 사용할 수 있다. 2. createSlice() : Reducer 함수의 객체, Slice 이름, 초기 상태 값을 받아들이고 해당 Action 생성자와 A.. RTK Query - RTK Query란? Redux Toolkit core 위에서 작성된 Data Fetching, Caching Tool 기존 Redux에 비해 훨씬 적은 양의 코드로 처리하여 상태 관리를 할 수 있다. 그 이유는 API 요청부터 데이터를 받아서 바로 Store에 저장하는 단계를 쭉 이어서 처리하기 때문이다. - 언제 사용하면 좋을까? Redux의 fetching 로직을 단순화 시킬 때나 코드 간결화, Redux DevTools를 이용해서 상태의 히스토리 변화를 보고 싶을 때 사용하면 좋을 것 같다. 그리고 isLoading 같은 변수를 이용하여 Data를 받아오기 전에 특정 UI를 보여줌으로써 UX를 향상시킬 수 있다. - 예제 - API 생성 import { createApi, fetchBaseQu.. Redux - Redux란? 상태 관리 라이브러리. - 왜 사용할까? 계층에 관계없이 direct하게 state에 접근하기 위함. -> state가 특정 컴포넌트에 종속되는 것을 막을 수 있음. prop drilling 현상(props -> props -> props ...)을 막을 수 있음. store에서 state를 관리를 해줘서 유지보수 용이. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. - 주요 특징 1. 기본적으로 flux 패턴 action -> dispatch -> reducer -> store -> view redux의 데이터 흐름은 동일하게 단방향으로 view(컴포넌트)에서 dispatch(store에서 주는 state를 바꾸는 함수)라는 함수를 통해 ac.. 이전 1 다음
