문제점useQuery나 useMutate, useQueryClient 등 react-query에서 자주 쓰이는 훅을 모듈화 시킬 때, 아래처럼 컴포넌트나 Custom Hooks 밖에서 export 시키면 오류가 발생한다!!import { useMutation, useQuery, useQueryClient } from "react-query";import api from "../utils/api";export const queryClient = useQueryClient();export const { data, isSuccess } = useQuery(["my_board"], () => api.get("/api/board"));export const { mutate } = useMutation( (bo..

recoil 페이스북에서 출시한 React 전용인 전역 상태 관리 라이브러리이다. 공식 레퍼런스 ↓↓↓ https://recoiljs.org/ko/docs/introduction/motivation 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 기존 전역 상태관리 라이브러리의 문제 기존에 사용되었던 Redux나 Mobx가 성능 자체에 문제가 있던 것이 아니라 오히려 Flux 패턴을 기반으로 안정적이지만 여러가지 문제가 존재했다 React 전용 라이브러리가 아니기에 React가 볼 때 Store가 외부의 어떤 것이며 동시성 모드를 구현하기에 호환성이 떨어진다 복잡한 보일러 ..

클라이언트/서버 상태프론트엔드 개발시에 다루는 상태는 클라이언트 상태와 서버 상태로 크게 두가지가 있다클라이언트 상태 - view를 위한 데이터한 유저만을 위한 데이터(세션간 지속될 필요 없는 데이터)렌더링에 반영하기 위한 데이터→컴포넌트의 state를 화면에 보여줄때, input의 state, 동기적으로 저장되는 redux store의 데이터 등서버 상태 - 서버에서 가지고 오는 데이터여러 유저가 공유해야 하는 데이터(세션간 지속되어야 하는 데이터)DB에 저장되어 있는 데이터→ axios로 api를 호출해서 자원을 가져오는 경우react-query서버 상태를 관리하기 위한 상태 관리 라이브러리이다. API 요청에 특화서버의 값을 클라이언트 쪽에 가져오거나 캐싱, 업데이트, 에러 핸들링, infinite..

우선 아래 링크를 참고하여 redux tool kit에 대한 설정을 하자 https://duckgugong.tistory.com/315 Redux Tool kit Redux Took kit? 리덕스를 사용하려면 작성해야할 코드와 파일이 기본적으로 너무 많다 → 보일러플레이트가 증가한다! Redux Tool Kit은 리덕스를 편하게 사용하는데 유용한 패키지가 들어있는 도구 duckgugong.tistory.com createAsyncThunk? redux에서 비동기 처리를하기 위해 사용한 미들웨어 redux thunk와 마찬가지로 redux tool kit에서는 creatAsyncThunk를 사용할 수 있는데 따로 미들웨어 설정을 할 필요 없이 redux tool kit에서 기본적으로 제공해준다! 사용법 ..