라이프 사이클이 필요한 이유

React의 성능 최적화를 위한 목적 또는 React가 컨트롤 할 수 없는 사이드 이펙트(Side Effects, 부수 효과)를 처리하기 위함입니다. 대표적인 사이드 이펙트는 다음과 같습니다.

  1. 네트워크 통신 (비동기 통신 요청/응답)
  2. DOM 컨트롤 (실제 문서 객체 접근/조작)
  3. 구독/취소 (예: 이벤트 핸들링 등)
  4. 오류 감지 (예: ErrorBoundary 컴포넌트 등)

네트워크 통신

서버에 데이터를 요청해 응답 받기까지 알 수 없는 시간이 필요하지만, UI는 멈춰서는 안됩니다. 그러므로 비동기 방식으로 데이터를 요청하고 응답 받아 UI를 업데이트 해야 합니다.

자주 사용되는 비동기 요청 방법은 다음의 2가지 입니다.

  1. Fetch API
  2. axios 라이브러리

NPM 레지스트리 API

npm 명령을 사용해 접근하는 Node.js 패키지, 메타데이터 및 여러 API 엔드포인트 정보를 제공합니다.

<https://registry.npmjs.org/-/v1/search?text=**{query}**&size=**{count}**>