카
카카오엔터테인먼트FE
February 24, 20221회
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
간단 소개
React에서 서버 상태 관리를 위한 SWR과 React Query의 사용법과 장점을 비교 분석하고, 리덕스의 한계를 극복하는 방법을 제시합니다.
AI Summary
- 리덕스(Redux)의 한계와 Data Fetching 라이브러리의 등장
- 리덕스는 Global State와 Server State를 함께 관리하여 비동기 로직 처리가 복잡하고 코드량이 증가하는 단점이 있었습니다.
- SWR과 React Query 같은 data fetching 라이브러리는 이러한 단점을 해결하고, 선언적인 프로그래밍을 가능하게 합니다.
- SWR과 React Query의 핵심 기능 및 사용법
- 두 라이브러리는 데이터 fetching, 캐싱, 자동 업데이트 등의 기능을 제공하여 개발자가 데이터 동기화에 신경 쓰지 않고 UI 개발에 집중할 수 있도록 돕습니다.
- useSWR과 useQuery 훅을 사용하여 데이터를 가져오고, mutate와 invalidateQueries 함수를 통해 데이터를 업데이트할 수 있습니다.
- SWR과 React Query의 옵션 및 부가 기능
- refetch 주기, focus 시 refetch, reconnect 시 refetch 등 다양한 옵션을 통해 데이터 업데이트 시점을 제어할 수 있습니다.
- React Query는 Dev tool을 지원하여 디버깅 및 성능 개선에 도움을 줍니다.
Next Feeds
주니어 엔지니어의 눈으로 본 AWS re:Invent
AWS re:Invent 참가 후기: 주니어 엔지니어의 성장 경험과 효과적인 질문의 중요성, 뱅크샐러드의 조직 문화에 대한 고찰.
AWS re:Invent주니어 엔지니어질문법문제 해결조직 문화
2022. 2. 22.
뱅크샐러드
초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
자바스크립트 빌드 툴 바벨, Terser, SWC의 기능과 차이점을 설명하고, SWC가 빠른 이유와 Next.js에서의 활용을 소개합니다.
BabelTerserSWC트랜스파일러코드 경량화
2022. 2. 17.
카카오엔터테인먼트FE
초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
초보 웹 개발자를 위한 자바스크립트 빌드 툴(바벨, Terser)과 SWC에 대한 소개 및 Next.js 환경에서의 SWC 활용법을 설명합니다.
바벨TerserSWC트랜스파일러minifier
2022. 2. 17.
카카오엔터테인먼트FE
컬리에서 데이터 분석가로 일한다는 것
컬리 데이터 분석가가 데이터를 수집, 분석, 활용하여 서비스 개선에 기여하는 과정을 설명합니다.
데이터 분석요구사항 정의데이터 품질데이터 활용컬리
2022. 2. 15.
컬리
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
카카오웹툰의 CSS 작성 방식 변화와 CSS-in-JS, CSS Module, Tailwind CSS의 특징 및 성능 비교 분석.
CSSCSS-in-JSCSS ModuleTailwind CSS성능
2022. 2. 10.
카카오엔터테인먼트FE
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
카카오웹툰의 CSS 작성 방법론과 CSS-in-JS, CSS Module, tailwind 적용 사례 및 성능 비교 분석.
CSSCSS-in-JSCSS Moduletailwind카카오웹툰
2022. 2. 10.
카카오엔터테인먼트FE