8주차 WIL (React심화 주차 정리)
Redux Toolkit
기존의 Redux를 개량한 것으로 -
코드를 더 적게 더 편하게 쓰기 위한 기능들을 흡수하여 만든 것을 리덕스툴킷
줄여서 RTK
createStore 보다는 configureStore 를 추천함. 이유는 이렇게 ,
// 일반 리듀서 사용 (API 두개를 사용)
// const rootReducer = combineReducers({
// counter,
// users,
// });
// Redux Toolkit 사용 (API 하나만으로 충분)
const store = configureStore({
reducer : {
counter : counter,
users : users,
}
});
+ 타입핑이 너무 많다 / 불필요하다라는 의견을 적극 수용하여
한번에 만들 수 있는 API 제공 [slice]
createSlice (); actionCreator 와 reducer를 한 번에 생성 가능하게됨
// action value 도 필요 없어짐/
export const plusOne = "counter/plusOne";
export const minusOne = "counter/minusOne";
const plus_N = "counter/plus_N";
const minus_N = "counter/minus_N";
////
const counter = (state = initialState, action) => {
switch (action.type) {
case plusOne:
return {
number: state.number + 1,
};
case minusOne:
return {
number: state.number - 1,
};
case plus_N:
return {
number: state.number + action.payload,
};
case minus_N:
return {
number: state.number - action.payload,
};
default:
return state;
}
};
export default counter;
// 여기만 있으면 됨
const counterSlice = createSlice({
name: "counter",
initialState: "initialState",
reducers: {
addNumber: (state, action) => {
state.number = state.number + action.payload;
},
minusNumber: (state, action) => {
state.number = state.number - action.payload;
},
},
});
export default createSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;
불변성을 유지시켜줘야한다.
.reduce : 불변성을 유지
.push : 불변성 mutate - 불변성 유지 불가;
react가 인식할 수 없음,
노올랍게도 Redux toolkit 안에서는 state.push(action.payload); 로 입력하더라도
인식을 함;
이유는 redux toolkit 안에 immer라는 기능이 내장되어 있어서 그래 -
return으로 새로운 객체를 리턴하는 등 여러 공정의 로직을 대신 간편하게 처리해주는
귀여운 녀석이 탑재되어있어서
Redux toolkit은 DevTools는 state가 다양하고 많이 변경되는데
이 모든 사항을 DevTools는 편리하게 이용하게 해준다, DevTools 때문에 react를 사용한다고 할 정도로 유용한 친구이다.
# json - server : fake sever / mock sever로
DB와 API 서버를 생성해주는 패키지로 우리가 백엔드에서 실제 db와 api sever가 구축될 때까지 프론트 엔드 개발에 임시적으로 사용할 data를 생성하기 위해 사용한다.
일종의 test 용임.
#비동기 처리
AXIOS
AXIOS는 별도의 라이브러리이지만
FETCH는 JS 내장 라이브러리 Promise 기반 비동기 통신 라이브러리
axios.get( "local @@") 이렇지만
fetch(url)
.the((response)=> response.json())
.them(console.log); 이런식임;; json으로 변환을 해줘야함
axios 심화 - instance와 interceptor
요청이 처리되기 전 (http requst가 서버에 전달되기 전)
응답의 then(성공) 또는 catch(실패)가 처리되기 전
#Redux 미들웨어
1) 미들웨어란?
리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고
리듀서는 새로운 state를 반환해
근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을
넣어서 할 수 있어
ex)
counter app 에서 + btn을 누르면 바로 +1 을 더하지 않고
3초 휘에 기다렸다가 +1이 되도록 구현하려할 떄 !!!! 미들웨어를 사용하면 좋겠지
1. thunk 함수 만들기 : createAsyncThunk
- reduxToolkit 내장 API
2. createSlice > extraReducer에 thunk 등록
3.dispatch
4. test
리덕스 미들웨어를 사용하면 , 액션이 리듀서로 전달되기전에 중간에 어떤 작업을 더할 수 있다.
Thunk를 사용하면, 객체가 아닌 함수를 dispatch할 수 있게 해준다
[thunk의 핵심]
리덕스 툴킷에서 Thunk함수를 생성할 때는 createAsyncThunk 를 이용한다.
createAsyncThunk() 의 첫번째 자리에는 action value 두번째에는 함수가 들어간다
두번째로 들어가는 함수에서는 2개의 인자를 꺼내 사용할 수 있는데
첫번째 인자는 컴포넌트에서 보내준 payload이고 두번쨰 인자는 thunk에서 제공하는 여러가지 기능이다.
custom hook
중복되는 혹은 필요없는 녀석들을 제외하고 코드를 커스텀해서 간단하게 짤 수 있다
const [name, setName] = useState("");
const [password, setPassword] = useState("");
const onChangeName = (e) => {
setName(e.target.value);
};
const onChangePass = (e) => {
setPassword(e.target.value);
};
이만큼을
const [name, onChangeName] = useInput();
const [password, onChangePass] = useInput();
이렇게
useInput은
import { useState } from "react";
const useInput = () => {
const [value, setValue] = useState("");
const handler = (e) => {
setValue(e.target.value);
};
return [value, handler];
};
export default useInput;