눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유 / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
My구독은 기능이 늘면서 Redux에 서버 데이터와 클라이언트 상태가 섞이고, API마다 액션·사가·로딩 상태를 관리하는 구조가 복잡해져 개선을 진행했다. 먼저 Redux의 고차 컴포넌트를 훅 기반으로 바꾼 뒤 서버 데이터는 React Query, 클라이언트 상태는 Context API로 분리했으며, API별 기본 쿼리와 폴더 규칙을 정해 중복 로직과 의존성 파악의 어려움을 줄였다. React 16에서는 커스텀 로딩 훅으로 여러 API의 상태를 통합했고, React 18 전환 후에는 Suspense를 활용해 로딩 분기와 컴포넌트 구조를 단순화했다. 단계적 전환과 프로젝트 상황에 맞춘 쿼리·테스트 설계가 중요하며, 서버 데이터가 적거나 데이터 흐름을 한눈에 파악해야 하는 경우에는 React Query가 항상 최선은 아니라는 점도 강조했다.
- 서버에서 가져오는 데이터와 클라이언트 상태를 먼저 구분하고, 각각 React Query와 Context API로 관리하면 상태의 역할이 명확해진다.
- Redux에서 React Query로 한 번에 옮기기보다 고차 컴포넌트를 훅 기반으로 바꾸는 등 단계적으로 전환하면 기존 서비스의 사이드 이펙트를 줄일 수 있다.
- API별 기본 쿼리를 정의하고 이를 조합하는 규칙을 두면 중복 로직과 쿼리 키 관리 부담을 줄일 수 있다.
- React 16에서는 여러 API의 로딩 상태를 통합하는 커스텀 훅으로 상태 관리를 보완했고, React 18에서는 Suspense를 활용해 로딩 분기 코드를 단순화했다.
- React Query 도입 전 서버 데이터의 비중과 재요청 동작을 검토하고, 테스트용 API 모킹과 뮤테이션 중복 호출 방지 방식도 함께 설계해야 한다.
소개
My구독은 보이지 않은 개선을 진행하고 있는데요. 그 중에서 Redux에서 React-Query로 전환했던 그 이유와 과정을 소개하고 그 과정에서 만났던 이슈를 어떻게 해결했는지 공유합니다. 이번 발표를 통해서 React 16과 React 18에서 React-Query를 도입하거나 기존 Redux 구조를 개선하려고 시도하실 때 참고가 되었으면 좋겠습니다. #React #React-Query #Tanstack-Query #Redux #리팩토링 #React16 #React18 카카오 FE플랫폼팀의 톡FE파트에서 프론트 앤드 개발자로 일하고 있는 프레드입니다. My구독과 이모티콘 스토어 프로젝트를 담당하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-77 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #...
비슷한 학습 자료
컨퍼런스 if kakao
React to PDF: 좌충우돌 PDF 생성 기능 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
리액트 컴포넌트를 PDF 파일로 생성할 수 있게 하는 기능을 개발했습니다. 파일 생성 시 페이지 단위로 픽셀을 맞추기 위해 다양한 스타일링 기술을 활용했으며, 그 과정에서 겪은 어려움과 해결 방법을 소개합니다. #frontend 카카오헬스케어에서 파스타 서비스의 프론트엔드 개발을 담당하고 있는 Zero입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-42 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
웹 개발 프론트엔드
컨퍼런스 if kakao
ㄷㄷㄷ: Domain Driven Design과 적용 사례공유 / if(kakao)2022
컨퍼런스 if kakao
Legacy Server의 포팅을 위해 Domain Driven Design을 적용하여 MSA 화 한 사례를 공유합니다. #MSA #DDD 카카오 엔터테인먼트에서 백엔드 개발자로 일하고 있는 셜록입니다. git blame을 열면 혹시나 제가 짠 코드일까 두근두근하면서, 레거시 서버로 고통받았던 나날과 함께 backlog를 열심히 청소하는 중입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-37 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
백엔드
컨퍼런스 if kakao
광고 웹 SDK 개편기 with Preact / if(kakao)2022
컨퍼런스 if kakao
광고 웹 SDK(AdFit Web SDK)는 AdFit 플랫폼을 이용하여 광고를 게재하고 수익을 창출하기 위해 웹사이트 등에서 사용하는 라이브러리입니다. 기존 프로젝트의 문제점을 분석하고 개선하고자 개편을 진행하였고 그 과정에서 얻은 소중한 경험들을 공유하려 합니다. 그리고 React의 이웃사촌, Preact를 소개하고 광고 SDK에 어떻게 도입하고 활용했는지도 이야기하고자 합니다. #리팩토링 #Preact 카카오 FE플랫폼팀의 비즈FE파트에서 광고 SDK를 개발하고 있는 제이크 입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-78 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
프론트엔드
컨퍼런스 if kakao
Sentry를 이용한 에러 추적기, React의 선언적 에러 처리 / if(kakao)2022
컨퍼런스 if kakao
카카오페이 프론트엔드에서 선언적 에러처리를 통한 사용자경험과 개발자경험 증대 및 Sentry를 통한 웹뷰환경에서의 에러 추적, 장애 대응, 사용자 경험 개선기 (axios interceptor와 에러바운더리를 이용해 에러핸들링을 개선해 나가고, sentry를 통해 에러데이터를 쌓아 사용자 경험을 개선해나간 스토리로 풀어볼 예정입니다.) #React #Sentry #선언적에러처리 사용자 경험을 소중하게 생각하는 카카오페이 FE개발팀의 클로이, 나나입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-84 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
프론트엔드 소프트웨어 테스트
컨퍼런스 if kakao
Preview Frontend @if(kakao)2022
컨퍼런스 if kakao
if(kakao)2022 컨퍼런스에서 Frontend 관련 기술 발표 트랙을 소개합니다. 01:28 1. MFA, 누구냐 너: 공통 플랫폼개발 파트의 MFA도입기 by 어호선(sun.kist) 카카오 공통플랫폼개발파트에서 프론트앤드 개발을 담당하고 있는 썬입니다. 01:58 2. 마이크로프론트엔드. 실무에 쓸만할까? by 김수찬(tony.chan) 카카오워크의 관리자 서비스를 개발하고 있습니다. 02:17 3. 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기 by 박은우(ethan.eunwu) 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 02:35 4. 카카오페이 프론트엔드 개발팀의 Client Side Rendering 환경 고도화 by 박병현(eric.dev) 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 02:56 5. 광고 웹 ...
프론트엔드
컨퍼런스 if kakao
Preview Web+Mobile @if(kakao)2021
컨퍼런스 if kakao
if (kakao) 2021 컨퍼런스에서 Data 관련 기술 발표 세션을 소개합니다. 1. 이게 진짜 일 리 없어 : 초보 리더가 프로젝트에서 마주치는 어려운 상황들 @effie.seo 올해 6월에 카카오맵 매장관리 서비스를 오픈했습니다. 매장관리 프로젝트 진행 과정을 통해서 카카오맵 FrontEnd 개발자들은 어떻게 협업하는지, 프로젝트에서 마주쳤던 상황들을 대처 하기 위해서 초보 리더인 제가 동료들과 함께 고민하고 시도했던 과정에 대해서 공유해보고자 합니다 2. Next.js와 Typescript를 이용한 프론트엔드 개발기 @jaden.js @luffy.yeon Next.js를 사용한 서버사이드 랜더링, Next.js 환경 Typescript 포팅을 하며 겪은 경험 공유 3. 톡패스워드 크롬 익스텐션 개발기 @felix.lee 입사 후 처음으로 혼자 프로젝트를 설계하면서 고민했던 구조선택과 고민거리에 대한 공유 4. UI 테스트 경험기 @jay.choi 리팩토링에 대한...
프론트엔드 소프트웨어 테스트 애자일 · 협업