둥지

웹 애플리케이션을 개발할 때, 사용자 경험을 향상시키기 위해 다양한 최적화 기법을 사용합니다.그 중 하나가 바로 requestIdleCallback입니다.이 함수는 브라우저가 대기 상태일 때 특정 작업을 수행하도록 예약할 수 있게 해줍니다.requestIdleCallback은 웹 API로, 브라우저가 대기 상태일 때 호출할 함수를 대기열에 넣습니다.이를 통해 개발자는 애니메이션이나 입력 응답과 같은 중요한 작업이 아닌 부수적인 작업을 효율적으로 처리할 수 있습니다.예를 들어, 페이지 로딩 후 사용자에게 보이지 않는 데이터 로딩이나 DOM 업데이트 등을 이 시점에 수행함으로써 사용자 경험을 저해하지 않도록 할 수 있습니다. requestIdleCallback 작동 원리이 함수는 브라우저의 이벤트 루프와 밀..

두 훅은 둘다 상태 관리를 위해 사용되는 훅이라는 점에서 같은 목적으로 사용됩니다. 두 훅은 각각의 특징이 있는데 아래와 같습니다.useState간단한 상태 관리를 위해 사용됨.useReducer복잡한 상태 로직을 관리하기 위해 사용됨.상태 업데이트 로직을 리듀서 함수로 분리하여 관리함.주로 여러 상태를 포함하거나 상태 변경 로직이 복잡한 경우에 사용. 간단한 토글 상태 혹은 간단한 구조의 데이터를 다루는 경우 useState를 사용하는 것이 좋습니다.하지만 특정 액션에 따라 복잡한 상태 로직 관리가 필요한 경우 예를들어 무한 스크롤에서 아이템요소들이 추가될때 아이템 요소들에 대한 갯수 및 페이지, 오프셋 등을 관리하고자 할때 useReducer가 더 적합할 수 있습니다.

리액트에서 컴포넌트는 생명 주기를 갖습니다.생명 주기란 컴포넌트가 생성되고 사용되고, 소멸되는 과정을 뜻합니다. 함수 컴포넌트에서 생명 주기는 크게 3가지 단계로 구분할 수 있습니다.렌더 (Render)커밋 (Commit)클린업 (Cleanup)이 세 단계를 각각 설명하자면 다음과 같습니다.렌더함수 컴포넌트가 호출되어 JSX가 반환됨.side effect가 호출되지 않음.커밋실제 DOM에 변화가 적용되는 단계.useEffect가 호출되는 단계.클린업컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전 정리 작업을 수행하는 단계.useEffect의 cleanup이 호출되는 단계. 이 단계를 간단히 아래의 코드로 살펴볼 수 있습니다.import React from 'react';function C..