Web Tech/library (3) 썸네일형 리스트형 React Query React Query는 React에서 비동기 데이터를 관리하기 위한 라이브러리이며, API 요청 및 상태 관리를 위해 규격화된 방식을 제공한다.서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 쉽게 도와주는 강점이 있다.React Query의 요청 방식Query 요청Query 함수를 사용해서 데이터를 가져오고 캐싱할 수 있으며, 데이터 패칭용으로 사용되며, 보통은 GET 방식때 사용한다.useQuery Hook은 요청마다 (API마다) 구분되는 Unique Key(Query Key)를 필요로 하며, React Query는 이 Unique Key로 서버 상태(API Response)를 로컬에 캐시하고 관리한다.(useQueries, useInfiniteQuery 같은 Hook.. Recoil Recoil리액트의 상태를 이용해 화면의 변화(Context API가 있긴 하지만 페이스북에서는 Context API를 이용해 상태를 관리하는 방식은 어렵다고 판단)를 줄 수 있지만 프론트엔드의 프로젝트가 점점 커지면서 그 상태가 너무 많아졌다. 그래서 상태를 체계적으로 관리해야 하는 필요성을 느껴서 상태 관리 라이브러리가 나오게 되었다. 그 중 리코일은 리액트만을 위한 상태 관리 라이브러리다.RecoilRoot 배치recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다. next.js -> _app.tsxreact => app.jsreturn ( YM ADMIN .. Formik & Yup Formikform 라이브러리로, Formik을 사용하면 마치 Context API를 사용하는 것처럼 form이 필요한 컴포넌트를 태그로 감싸주어 props drilling 없이 '컴포넌트 내에서 전역적으로 상태 관리'를 할 수 있다Getting values in and out of form state: 값 상태 관리 Validation and error messages: 유효성 검사 Handling form submission: 제출 방식 제어formik 장단점장점폼 값을 유연성있게 다룰 수 있으며, state 방식과 context 방식이기 때문에 직관적이고 쉽게 데이터 흐름을 제어할 수 있다.controlled component 방식이기 때문에 context api처럼 데이터를 다룰 수 있어 하나의 .. 이전 1 다음