부수 효과

리액트의 useEffect는 데이터 가져오기, 구독 관리, DOM 업데이트, 사이드 이펙트 처리 등 다양한 작업에 사용된다. 그러나 useEffect를 과도하게 사용하면 성능 저하, 불필요한 렌더링, 디버깅의 복잡성 같은 문제가 발생할 수 있다. "Leave useEffect Alone!" 라는 가이드 글을 참고하여 올바른 useEffect 사용법에 대한 추가 설명을 덧붙여서 정리해 봤다.  경쟁 상태(Race Condition) ⭐경쟁 상태는 여러 비동기 작업이 동시에 실행될 때, 실행 순서나 결과가 예측하지 않은 방식으로 작동하는 현상을 가리킨다. 아래 코드에서 버튼을 여러 번 클릭하면 counter 값이 증가하고, 각 요청은 랜덤한 시간만큼 대기한 후 response 상태를 업데이트한다. 하지만 이..

TL;DR정의부수 효과를 추상화하는 방식 중 하나부수 효과를 발생시키는 연산(Effect)과 그 연산을 처리하는 핸들러(Effect Handler)로 구성코드 관리 방식코드 조각을 감싸는 맥락(context)으로 책임 분리특정 컴포넌트를 감싸는 부모 컴포넌트에게 역할 위임React에서 대수적 효과 — Suspense, ErrorBoundary로딩 UI, 에러 표시 역할을 특정 컴포넌트로 감싸는 형태로 분리자식 컴포넌트에서 발생한 부수 효과를 부모 컴포넌트에서 캐치하고 처리대수적 효과의 장점순수하지 않은 동작에 대한 책임 분리선언적(declarative) 코드 작성 가능What과 How를 분리하여 코드 가독성과 유지보수성 향상 대수적 효과란?대수적 효과는 부수 효과를 다루는 방식 중 하나로, 부수 효과를 ..