study_record

Recoil, Redux, Zustand와 같은 상태 관리 라이브러리를 두고 왜 React Query를 사용하는 것일까?React Query를 사용하는 이유는, 서버 상태를 효율적이고 일관되게 관리하기 위해서이다. React 자체는 클라이언트 상태를 다루는 데는 강력하지만,서버에서 데이터를 가져오고 이를 유지, 갱신, 캐싱하는 등의 기능은 기본적으로 제공하지 않기 때문에 별도의 도구가 필요하다. React Query는 이러한 서버 상태를 자동으로 관리해 주는 훌륭한 라이브러리이며,React Query를 사용하면 데이터를 요청할 때마다 수동으로 로딩 상태, 에러 처리, 데이터 갱신 등을 구현하지 않아도 된다. 내부적으로 자동 캐싱, 요청 중복 제거, 실패 시 재시도, 포커스 복귀 시 자동 리페치 등의 기능..

React는 여러 개의 컴포넌트로 구성되어 웹 페이지를 만든다.이렇게 컴포넌트를 나누다 보면, 컴포넌트 간에 상태(변수)를 공유해야 하는 상황이 자주 발생하는데,이때 보통 props, Context API, 혹은 Redux와 같은 상태 관리 도구를 사용한다. 그중 Redux는 가장 널리 알려진 상태 관리 라이브러리로, 전역 상태를 정의하고 이를 여러 컴포넌트에서 공유할 수 있게 해준다.하지만 Redux는 초기 설정이 복잡하고, 문법이 다소 어렵다는 단점이 있다. 그래서 최근에는 Redux와 비슷한 기능을 제공하면서도, 더 간단하고 직관적인 API를 가진 상태 관리 도구들이 많이 사용된다.그 중 하나가 바로 Zustand이다. 이번 글에서는 Redux와 비슷한 기능을 제공하면서도 훨씬 사용하기 쉬운 Zus..

1. Redux란?Redux는 JavaScript 상태 관리 라이브러리라 JavaScript든 React든 잘 어울린다. 1.1 초기 설정JavaScript에서 Redux를 사용하려면 따로 설정할 게 없다.React에서 Redux를 사용하려면 index.js에 App.js를 Provider 컴포넌트로 감싸 앱의 다른 컴포넌트에서 store를 사용할 수 있도록 해야한다.import { Provider } from "react-redux";import store from "./store"; // state가 저장되어 있는 store 파일 위치ReactDOM.render( , document.getElementById("root")); 1.2 메소드useSelector() : state 데이터 ..