TIL | React (redux 미들웨어, redux devtools ... )

23.07.17

1. redux 미들웨어

react-query (react-query는 redux-thunk를 대신할 수 있음)

Q. axios만 사용해도 되는데 왜 굳이 redux-thunk나 react-query를 사용하는 걸까 ?
A. 클라이언트 데이터와 서버 데이터가 있는데 클라이언트 데이터와 서버 데이터를 따로 전역으로 갖고있고 싶기 때문에 !
일단 axios만 사용하면 해당 컴포넌트에 들어갈 때마다 DB와 서버 통신을 함 => 비효율적임
전에는 redux를 사용해서 dispatch해서 데이터를 저장하는 식으로 (클라이언트 데이터로써도 관리를 하는) 구현을 했는데 비동기로 특화되어있는 redux-thunk를 이용하면 훨씬 데이터 관리가 용이함

2. redux devtools -> development 환경에서 안보이게 설정

const isDev = process.env.NODE_ENV === "development";
const store = configureStore({
reducer: {
diary,
},
devTools: isDev,
});

+) 비동기 함수를 useEffect 안에서 사용하려면 함수 앞에 async를 사용하면 안되고 내부에서 새롭게 함수를 선언해서 사용해야한다