[Tanstack Query]
제가 오늘 탠스택쿼리의 기본을 씹어먹어보겠습니다.
아 물론 미래의 제가!^-')b
[Redux Toolkit, RTK]
미래에서 온 제가 RTK를 씹어먹기로 결심했습니다.
조금 씹다가 혼코노 때리고 책 읽다가 잠드는 밤을 보낼 것입니다.
JJQKR은 이 일을 기억할 것입니다.
https://redux-toolkit.js.org/tutorials/quick-start
0. RTK 설치
yarn add @reduxjs/toolkit react-redux
1. Redux Store 생성
- 공식문서.ver
리듀서 파라미터 안에 필드를 정의함으로써, 이 슬라이스 리듀서를 사용하여 모든 상태 변경을 관리하라고 스토어에게 지시
-
강의자료.ver
store.js를 따로 빼느냐 안 빼느냐, 그리고
reducer 필드가 비었는지 아니면 안에 리듀서 함수가 정의되어 있느냐의 차이.
13번 라인 reducer 필드 안의 counter와 todos는 단순히 이름이다!
공대생 이수민 : reducer 옵션에서
{ counter: counterReducer, todos: todoReducer }를 지정했습니다.
여기서 counter와 todos는 단순히 이름이며,
각각 counterReducer와 todoReducer를 가리키고 있습니다.
즉, counter와 todos는 각각
counterReducer와 todoReducer를 나타내는 키(key)입니다.
이렇게 지정해 Redux 스토어에 counter와 todos 상태를 등록,
Redux 스토어에서 해당 리듀서들을 사용하여 상태를 관리할 수 있게 됩니다.
2. 리액트에 Redux Store 제공
- 공식문서.ver
강의자료에서는 index.js 대신 main.js에 설정해준다.
3. Redux State Slice 생성
- 공식문서.ver
slice 식별을 위한 문자열 name,
initial state 값,
한 개 이상의 reducer 함수(상태 업데이트 방식을 정의함)를 포함시켜 슬라이스를 생성합니다.
RTK의 createSlice API와 createReducer API는
내부에서 Immer js를 사용하여
불변성을 유지하지 않는 상태 업데이트 로직을 쓸 수 있게 합니다.
- 강의자료.ver
4. RTK를 이용해 만든 모듈을 App.jsx에서 조회
- 강의자료.ver
5. Redux State와 Actions를 Component에서 사용
- 공식문서.ver
React-Redux hook들을 통해
컴포넌트와 store가 상호작용하게 합니다.
useSelector로 data를 읽어오고
useDispatch로 actions를 가져옵니다.
Increament, Decrement 버튼을 클릭하면
- 상응하는 Redux action이 store로 디스패치 되고
- counter slice reducer는 actions를 보고 상태를 업데이트,
- Counter component는 store로부터 새 값을 보고 리렌더링.
이게 뭔 소린데..?
파일 구조
