Front-End(Web)/React - 라이브러리들
-
[Recoil] Recoil 고수의 길 - snapshot과 useRecoilCallbackFront-End(Web)/React - 라이브러리들 2023. 10. 5. 17:44
지난번, atomFamily와 selectorFamily 포스팅에 이어, Recoil에서 유용하게 쓰일법한 기능을 하나 더 소개하고자 한다. Recoil 상태들의 한 순간인 snapshot, 그리고 이를 다루는 useRecoilCallback 등 다양한 API 기능들에 대해 알아보자! 🔗 기능들을 소개하기 앞서.. snapshot과 관련된 기능들을 소개하기 앞서, 이를 소개하게 된 배경들을 간단히 공유해볼까 한다. 1. useRecoilState와는 다른 atom 활용방법 이전 포스팅에서, Recoil의 atomFamily, selectorFamily 등에 대해 다뤄보았다. (포스팅 링크) [Recoil] Recoil 고수의 길 - atomFamily, selectorFamily 최근 프로젝트들을 진행하..
-
[Recoil] Recoil 고수의 길 - atomFamily, selectorFamilyFront-End(Web)/React - 라이브러리들 2023. 10. 2. 18:31
최근 프로젝트들을 진행하면서, Validator 솔루션에 Recoil을 적극 채용하면서 이런저런 기능들을 시도해봤던 것 같다. 그 과정에서 유용하게 사용한 기능들에 대해, 정리 및 부가학습 차원에서 포스팅을 정리하고자 시작하게 되었다! 🔗 Recoil 이란? Recoil은 페이스북에서 출시한 React 전용 전역 상태관리 라이브러리이다. 이전, Redux 등 라이브러리들과 다르게, 전역상태를 atomic하게 각 컴포넌트에서 구독 및 업데이트(리렌더) 되는 것이 특징이다. * 자세한 내용은 이전 포스팅을 참고해주길 바란다. (참고링크) [Recoil] 전역 상태관리 라이브러리 - Recoil 정복기 🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일..
-
[Form 라이브러리] React Hook FormFront-End(Web)/React - 라이브러리들 2023. 3. 19. 00:37
🧐 개요 이전 포스팅에선, Form 라이브러리를 도입한 배경과 React에서 많이 활용되는 Formik 라이브러리에 대해 포스팅했다. (링크) [Form 라이브러리] formik 🧐 개요 프로젝트들을 진행하면서, 입력 form 컴포넌트를 제작해야 하는 경우가 종종 존재하였다. 특히, 폼 제어를 위한 다양한 기능들이 요구된다. (입력값 관리, 유효성 검사 및 에러상태 관리, abangpa1ace.tistory.com 포스팅 초반부에서 소개했듯, Formik과 더불어 통용되는 라이브러리가 React Hook Form(이하 RHF) 이다. 개인적으론 이 라이브러리에 장점을 더 느꼈으며, 포스팅을 통해 주요개념과 왜 그렇게 생각했는지를 함께 소개해보겠다! * 폼 라이브러리 비교 구분 formik React Ho..
-
[Form 라이브러리] formikFront-End(Web)/React - 라이브러리들 2023. 3. 15. 05:26
🧐 개요 프로젝트들을 진행하면서, 입력 form 컴포넌트를 제작해야 하는 경우가 종종 존재하였다. 특히, 폼 제어를 위한 다양한 기능들이 요구된다. (입력값 관리, 유효성 검사 및 에러상태 관리, 유효성 검사 및 입력값 제출 API 연동, 성공/실패 시의 fallback 로직 등..) 이전 회사의 멤버십 프로젝트에서도, 이러한 기능들을 템플릿화 하기 위해 컴포넌트 커스터마이징 등 많은 시도를 했다. 또, 최근 파트너 프로젝트를 지원하면서, 투어상품을 판매하는 파트너로 가입하기 위해 진행되는 다양한 입력 폼에 대한 제어가 필요함을 다시금 느꼈다. 앞으로도, 입력 폼들에 대한 신규개발 혹은 리팩토링을 대비해, React 환경에서 이를 좀 더 심플하게 구현할 방법들에 대해 리서치한 내용들을 간단히 공유하고자 ..
-
[React Query] (6) Suspense와 Error Boundary 적용Front-End(Web)/React - 라이브러리들 2022. 11. 3. 04:46
🧐 서론 지난, React 18의 Concurrency(동시성)을 시리즈로 포스팅하면서 비동기의 선언적 로딩인 Suspense와 에러처리인 Error Boundary 에 대해 알아보았다. * Suspense(위, 링크), Error Boundary(아래, 링크) [React] Concurrency(동시성) - #1. Suspense와 React.lazy 🧐 서론 전 회사분들과 진행하는 스터디에서 나는 Suspense와 React.lazy를 통한 코드 스플리팅 부분을 맡게 되었다. Suspense에 대해서만 공부하려고 했다가, Error Boundary나 Transition API 등 관련된 기능 abangpa1ace.tistory.com [React] Concurrecy(동시성) - #2. Error B..
-
[React Query] (5) SSRFront-End(Web)/React - 라이브러리들 2022. 8. 12. 21:12
🧐 서론 지난 포스팅까지 진행하며, React Query를 사용해서 데이터를 다루는 주요 문법들을 정리하였다. 프로젝트를 마이그레이션하며 적용하던 중, Next.js 세팅인 점을 상기했으며 당연히 React Query도 SSR을 위한 솔루션을 제공하는 것을 알았다. Next.js에서의 SSR을 React Query와 함께 사용하기 위해 어떤 방법이 있는지 한 번 정리해보도록 하겠다. 🌺 SSR 사용하기 공식문서는 React Query가 2가지 형태의 SSR을 지원한다고 소개한다. initialData : SSR 메서드로 불러온 응답을 React Query 기본값으로 넣어주는 방법 Hydration : SSR 내에서 prefetch를 통해 쿼리를 불러온 뒤, queryClient에서 dehydrate한 ..
-
[React Query] (4) useMutation()Front-End(Web)/React - 라이브러리들 2022. 8. 10. 20:59
🧐 서론 지난 포스팅까지, useQuery()를 쓰는 다양한 기법들과 더욱 확장된 기능을 위한 훅들을 알아보았다. (useQueries, useInfiniteQuery 등) 계속 언급했듯, useQuery()는 데이터 조회(HTTP 요청의 GET)를 담당하는 훅이다. 이번 포스팅에서는, useMutations() 훅을 통해 POST, PUT, DELETE를 어떻게 핸들링하는지 알아보도록 하겠다! (공식문서는 위 요청을 Mutation으로 구현할 것을 권장한다. useQuery의 onSuccess, onError로 POST도 구현가능하나 가급적 지양) * https://www.youtube.com/watch?v=NYCG1o38oEQ&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&i..
-
[React Query] (3) useQuery() 고급 - Parallel, Dependent, Paginated, InfiniteFront-End(Web)/React - 라이브러리들 2022. 8. 2. 01:07
🧐 서론 앞에서는, React Query의 가장 기본 개념이 되는 useQuery() 메서드에 대해 알아보았다. (이는, GET 요청을 담당) 이번 포스팅도 useQuery() 에서 이어지는 내용들이며, 이를 사용하는 다양한 방법들 그리고 확장된 기능들을 구현하기 위해 지원되는 useQuery() 외의 메서드들을 집필해보려고 한다. * https://www.youtube.com/watch?v=2s2iJLLDwgk&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=14 🌺 useQuery() 더욱 잘 쓰기 - Custom Hook으로 분리하기 아래 예시는 이전에 useQuery() 로 구현한 리스트 페이지이다. import { useQuery } from "react-que..