Data fetching library *SWR을 살펴보기 이전에 Data fetching library가 무엇인지 알아봅시다. 2020년부터 React Query 나 SWR 와 같은 data fetching 라이브러리들이 인기를 끌고 있습니다. 1년 동안 받은 깃헙 스타 개수를 기반으로 인기 지수를 측정하는 risingstars의 React Ecosystem을 확인하면 React Query가 9위, SWR이 14위(2023년 기준)로, 여전히 인기를 유지하고 있습니다. Data fetchng library 왜 사용할까요? 이는 우선, 리액트 프로젝트에서 일반적으로 사용하는 상태(state)에 대해 알아보아야 합니다. Local State: 리액트 컴포넌트 안에서만 사용되는 state Global Sta..

상태관리의 필요성 리액트로 웹 개발 시 프로젝트가 커질 수록 상태(state)관리의 필요성은 커집니다. 상태관리가 제대로 되지 않으면 추적이 어렵고, 에러를 예측할 수 없게 되고 이는 유지보수를 어렵게 만듭니다. 리액트 상태관리를 도와주는 라이브러리는 Redux, Mobx, Recoil 정도가 있으며, 방법의 차이는 있겠지만 이들이 해결하려는 문제는 같습니다. 모든 컴포넌트에 공유 가능한 전역 상태의 정의 각 컴포넌트에서의 전역 상태 접근과 변경 Redux *상태관리 라이브러리의 예시로는 가장 많이 사용되는 Redux로 진행합니다. 상태관리 문제를 해결하는 방법 카운터의 초기상태와 변이방법을 리듀서로 정의합니다. function counter(state = 0, action) { switch (actio..

MVC의 문제점 Flux 아키텍처를 알아보기전에 그 배경이 되는 MVC 패턴의 특징을 먼저 알아보겠습니다. Facebook에서 언급했던 MVC의 단점은 양방향 데이터 흐름입니다. MVC 패턴의 동작 과정은 다음과 같습니다. Controller는 Model의 데이터를 조회하거나 업데이트 하는 역할을 합니다. Model이 업데이트 되면 View는 화면에 반영합니다. View가 Model을 업데이트할 수도 있습니다. 이 때 해당 Model에 의존성을 가진 또 다른 View가 업데이트 될 수 있습니다. 이러한 양방향성 데이터 흐름을 가진 동작 과정은 애플리케이션이 복잡해질 수록 유지보수, 기능추가를 어렵게 합니다. Flux 아키텍쳐란? MVC 모델의 단점을 보완하기 위해 페이스북에서 발표한 아키텍쳐입니다. 단방..