자바스크립트의 async/await은 callback지옥으로부터 우리를 탈출시켜 줬습니다. 비동기 코드를 동기적 코드와 유사하게 처리할 수 있게 할 뿐 아니라, 비동기 결과의 제어 흐름을 콜백함수에 넘겨주면서 생기는 제어의 역전 현상을 해결해주기 때문입니다.
async/await처럼 대수적 효과도 특정 문제를 해결해주기 위한 기능 혹은 크게는 패러다임으로 나올 수 있다고 생각합니다.
대수적 효과
프로그래밍에서 대수적 효과라는 단어는 직관적으로 와닿지는 않지만 쉽게 이해하자면 무엇(what)과 어떻게(how)를 분리할 수 있게 도와주는 도구입니다.
즉, 우리가 무엇(what)을 어떻게(how) 개발하는 과정에서 어떻게라는 과정을 위임함으로써 무엇을 개발할 때 강력하게 추상화하여 보다 선언적인 프로그래밍을 할 수 있게 해주는 것이라고 이해 했습니다. 이 과정에서 async/await 처럼 다른 함수에 색을 입히는 과정이 없기 때문에 여러 함수들과의 상호작용에서 복잡하게 얽히는 문제도 없습니다.
async/await 이 색을 입힌다는 말은 a라는 async함수를 b에서 호출하고 기다리기 위해 b함수도 연쇄적으로 async함수로 되어야 한다는 뜻입니다.
React Suspense와 대수적 효과
React Suspense는 fetch하는 데이터가 아직 도달하지 않았으면 그 다음 코드를 실행을 멈추고 fallback UI를 렌더링 한 뒤에 데이터가 성공적으로 도달하면 해당 컴포넌트를 렌더링 합니다. 어떻게 이러한 흐름이 가능할까요?
실제로 Suspense 로직은 아래의 순서와 같이 진행됩니다.
- suspense를 사용하는 컴포넌트를 실행한다.
- suspense가 포함된 fetch 로직에서 Promise를 던진다(throw).
- 해당 Promise는 상위 컴포넌트로 전파되어 가장 가까운 Suspense가 처리한다(catch).
- 해당 Suspense는 Promise를 기다리는 동안 fallback UI를 대신 띄운다.
- Promise가 성공적으로 완료되면 기억해둔 아까의 컴포넌트를 다시 렌더링한다.
이 과정에서 컴포넌트의 suspense 이후의 코드부터 다시 실행하는 것은 아니므로 완전히 대수적 효과를 따른다고 볼 순 없지만, 최대한 대수적 효과를 흉내내려고 했다는 것을 느낄 수 있습니다.
실제로 대수적 효과를 흉내낸 기능인 Suspense를 사용하면서 개발을 했을 때, 비동기 처리의 결과로 따르는 3가지의 상태인 성공, 에러, 대기 에서 해당 컴포넌트는 성공이라는 경우에만 집중하여 개발할 수 있고, 대기와 에러에 대해선 위임을 통해 높은 추상화로 선언적 프로그래밍을 경험할 수 있었습니다.
에러 처리는 Error Boundary에 위임함으로써 Unhandled Error를 다룰 수 있습니다.
위임과 대수적 효과라는 기능을 간접적으로 체험해봄으로써, 보다 직관적인 코드를 짜고 흐름을 설계할 수 있는 인사이트를 많이 얻은 것 같아서 앞으로의 개발에도 더 기대가 됩니다.
참고문서 https://overreacted.io/ko/algebraic-effects-for-the-rest-of-us/