side effect
[React] 대수적 효과 Algebraic Effect
[React] 대수적 효과 Algebraic Effect
2024.05.18TL;DR정의부수 효과를 추상화하는 방식 중 하나부수 효과를 발생시키는 연산(Effect)과 그 연산을 처리하는 핸들러(Effect Handler)로 구성코드 관리 방식코드 조각을 감싸는 맥락(context)으로 책임 분리특정 컴포넌트를 감싸는 부모 컴포넌트에게 역할 위임React에서 대수적 효과 — Suspense, ErrorBoundary로딩 UI, 에러 표시 역할을 특정 컴포넌트로 감싸는 형태로 분리자식 컴포넌트에서 발생한 부수 효과를 부모 컴포넌트에서 캐치하고 처리대수적 효과의 장점순수하지 않은 동작에 대한 책임 분리선언적(declarative) 코드 작성 가능What과 How를 분리하여 코드 가독성과 유지보수성 향상 대수적 효과란?대수적 효과는 부수 효과를 다루는 방식 중 하나로, 부수 효과를 ..
[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트
[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트
2024.05.05엄격 모드의 기능CRA로 생성한 React 프로젝트에선 엄격 모드(Strict Mode)가 기본적으로 적용돼 있다. 엄격 모드는 어플리케이션의 잠재적인 문제를 알아내기 위해 리액트에서 제공하는 도구다. 개발 모드에서 함수 컴포넌트 렌더링 / API 호출 등이 중복해서 발생한다면 엄격 모드 때문에 그럴 가능성이 높다.import React from "react";import ReactDOM from "react-dom/client";import App from "./pages/App";const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement,);root.render({/* ... */}); 엄격 모드는 아래 기능을 제..