[React] 대수적 효과 Algebraic Effect

TL;DR

---

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

 

대수적 효과란?

---

대수적 효과는 부수 효과를 다루는 방식 중 하나로, 부수 효과를 추상화하여 연산(Effect)과 그 연산을 처리하는 핸들러(Effect Handler)로 구성된다. 대수적 효과에선 코드 조각을 감싸는 맥락(context)으로 책임을 분리한다. 이는 특정 컴포넌트를 감싸는 부모 컴포넌트에게 역할을 위임하는 방식이다.

 

React에선 Suspense와 ErrorBoundary를 이용해 로딩 UI와 에러 표시 역할을 특정 컴포넌트를 감싸는 형태로 분리한다. 이 경우 부모 컴포넌트가 자식 컴포넌트에서 발생한 부수 효과를 캐치하고 처리한다.

 

즉, 대수적 효과는 서로 다른 환경 사이의 인터랙션에서 발생하는 순수하지 않은 부수 효과를 적절한 핸들러를 사용하여 해결하는 접근 방식이다. 이 핸들러를 통해 로컬 함수가 발생시킨 부수 효과를 부모 환경에서 캐치하여 처리한 후, 다시 로컬 함수가 멈췄던 곳으로 흐름을 되돌린다.

 

예를들어 React에서 Suspense와 ErrorBoundary를 사용했을 때 자식 컴포넌트가 Promise를 던지거나(throw Promise) 에러를 발생시키면, 부모 컴포넌트인 Suspense나 ErrorBoundary가 이를 캐치하여 처리한다. 그 후 어플리케이션 흐름을 자식 컴포넌트가 멈췄던 곳으로 되돌린다.

 

이처럼 대수적 효과는 코드 조각을 감싸는 맥락을 통해 순수하지 않은 동작에 대한 책임을 분리한다. 이러한 책임 분리 방식은 선언적(declarative)인 코드 작성을 가능하게 하며, React가 지향하는 점과 일치한다. What(무엇을 할지)과 How(어떻게 할지)를 분리하기 때문에 코드 가독성과 유지보수성을 향상시키는 효과를 가져온다.

 

참고 글

---

• Algebraic Effects for the Rest of Us | Overreacted
• Algebraic Effects of React Suspense | QANDA
• 추상화를 위한 대수적 효과(Algebraic Effect)와 React Suspense  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요