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..

라이프사이클 단계 리액트 생명주기는 크게 3단계로 나눌 수 있습니다. Mounting → Updating → Unmounting 각 생명주기에는 순차적으로 실행되는 메서드들이 있습니다. 각 생명주기 마다 메서드의 순서대로 상세설명을 진행하겠습니다. Mounting DOM에 Node를 추가하는(컴포넌트가 화면에 나타는) 작업입니다. 메서드는 다음과 같은 순으로 진행됩니다. constructor → getDerivedStateFromProps → render → componentDidMount 1. constructor(생성자) 리액트에서 생성자는 컴포넌트가 생성될 때(DOM에 추가되기 전) 실행됩니다. 초기 상태(state)를 설정합니다. 2. getDerivedStateFromProps React 17부..

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