CODE_PLAN

리덕스를 사용하기 위해서는 결국 우리가 리덕스의 구성요소를 모두 만들어야만 사용이 가능합니다.
근데 만약 리덕스 모듈을 개발하는 개발자마다 구성요소들을 제 각각 구현하면 아무래도 안 좋겠죠?
그러면 내가 개발자와 협업을 해야 하는 상황에 놓였을 때 수많은 파일 중에 내가 필요로 하는 구성요소를 찾는것이 어렵습니다.

그래서 한 개발자가 이것을 패턴화하여 작성하는 것을 제안했는데, 그것이 바로 Ducks패턴입니다. Ducks 라는 이름은 리덕스의 덕스라고 합니다. 심볼은 오리 입니다.

짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법인 쓰로틀링, 디바운싱
이란? 

Timer Web API 중 setTimeout 메소드를 사용하여 쓰로틀링과 디바운싱을 각각 구현해보고 원리를 이해하고 적용하실 줄 알아야 합니다.

짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것

// thunk 함수는 createAsyncThunk 라는 툴킷 API를 사용해서 생성합니다.

니다. 이 API는 함수인데, 첫번째 인자에는 Action Value, 두번째 인자에는 함수가 들어갑니다. 이 함수에 우리가 하고 싶은 작업들을 구현하면 됩니다.

쿼리가 완료되지 않앗을때 isLoding이 true가 됨 

- new 쿼리 클라이언트 상위에서 했기에 useQ 쿼리 클라이언트 해야

상위를 하위에서 이용함 (하나의 흐름으로서)

- query key 는 겹치면 안됨 

ex) useQuery('qk2',api); 
useQuery('qk2', api); X

쿼리에서 배열은 순서를 따지고 객체는 순서를 안따짐

- 변경이 일어난경우 혹시나 갱신해줘야 하는 데이터가 없는지를 반드시 생각 

있다면 해당 쿼리키를 invalidate를 해줘야함 

 src/configStore.js

• src/configStore.js 에 아래 코드를 입력

import { createStore } from "redux";
import { combineReducers } from "redux";

/*
1. createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 
리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 
리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
*/

/*
2. combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠? 
이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
*/

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store;

모듈이란, State의 그룹이라고 했습니다. 우리의 첫 모듈은 카운터 프로그램에 필요한 State들이 모여있는 모듈이 될 것 입니다. 아래 순서대로 파일을 생성하고 코드를 입력해볼까요?

 첫 모듈 만들기

1. modules 폴더에 counter.js 파일을 생성한다.
2. 코드를 작성한다.
   
   

1) initialState === 초기 상태값

2) Reducer === 변화를 일으키는 함수

카운터 모듈을 스토어에 연결하기

// src/redux/config/configStore.js


// 원래 있던 코드
import { createStore } from "redux";
import { combineReducers } from "redux";

// 새롭게 추가한 부분
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});
const store = createStore(rootReducer);

export default store;

스토어와 모듈 연결 확인하기

• (1) useSelector = 스토어 조회
  

Toolkit 이란? 

툴 = 도구 

kit = 도구를 간편하기 쓰기위한것 

즉, Toolkit은 도구들의 모음이라고 할수있겠습니다.

동일한 값을 반환하는 함수를 계속 호출해야 하면 필요없는 렌더링을 한다고 볼 수 있습니다.
맨 처음 해당 값을 반환할 때 그 값을 특별한 곳(메모리)에 저장합니다. 
이렇게 하면 필요할 때 마다 다시 함수를 호출해서 계산하는게 아니라 이미 저장한 값을 단순히 꺼내와서 쓸 수 있습니다.
보통 이러한 기법을 캐싱을 한다. 라고 표현하기도 합니다.

React.memo는 컴포넌트를 메모이제이션 했다면,
useCallback은 인자로 들어오는 함수 자체를 기억(메모이제이션) 합니다.