React hook이 대수적 효과(algebraic effect)인가?

(참고 : 이 글은 본인이 알고 있는 내용과 GPT-4에게 문의한 내용을 편집한 글입니다. 틀린 내용이 있을 수 있습니다) 들어가기에 앞서 리액트 코어 팀에는 함수형 패러다임의 지지자가 많다. 단적인 예로 리액트 창시자인 Jordan Walke는 ML계열 언어의 신봉자였는데 그래서인지 React의 프로토타입을 Standard ML로 만들었고 후에는 OCaml로 React를 포팅했다. 대수적 자료형(GADT, Generalized algebraic datatype)과 Existential types가 필요했기 때문에 OCaml로 옮겼다고 한다. 그리고 그는 현업 현장에서의 채택을 위해 프로토타입을 JS로 변환했다 Jordan과 리액트 팀은 사람들의 냉소적인 비난에도 불구하고 ReactJS를 이륙하도록 추진했고 결국 성공했다. (출처 : Cheng Lou, 초기 리액트 코어 팀 https://news.ycombinator.com/item?id=15209814 ) 그런 그가 ReasonML을 만든 이유는 OCaml계열 언어가 리액트를 사용하기에 javascript보다 더 적합하다고 판단했기 때문이다 서론이 길었다. 아무튼 이처럼 함수형 패러다임을 지지해온 리액트 팀은 자연스래 대수적 효과에 큰 영감을 받았고 이를 리액트에 도입하고자 했던 것은 2017년 무렵으로 추정된다. 그런데 여기서 짚고 넘어가야 할 점이 있다. React Hooks는 대수적 효과가 아니다. 엄밀히 말하면 대수적 효과와 아무 상관이 없다. 대수적 효과는 순수함수적인 부분에서 Side Effect를 유발하는 코드부를 격리하는 테크닉인데 React Hooks는 이런것과 상관이 없다. 단지 몇 가지 유사한 목표와 설계 원칙을 공유할 뿐이다. 그 유사한 목표라는 것이 무엇인가? 간단하게 이야기하면 "Side Effect의 통제"이다. "Side Effect의 통제"가 무슨 말일까? 두가지 관점에서 설명할 수 있다 1. Side Effect로 프로그램의 오류가 발생했을 때 그것이 코드의 어느 부분에서 발생했는지, 왜 발생했는지, 어느 시점에서 발생했는지 등을 쉽게 알고 그것을 손쉽게 수정한다. 쉽게 말해 유지보수에 투입되는 정신적인 피로도와 시간을 줄인다 2. Side Effect로 프로그램의 오류가 발생했을 때 그 에러가 미치는 범위를 최소화한다 자, 그러면 이러한 목표를 어떻게 달성할 수 있을까? React 코어 팀은 대수적 효과의 개념에서 영감을 받아 hooks, "특히" useEffect를 설계했다고 하니 useEffect에 대해 살펴보면 그 해답을 얻을 수 있을 것이다. 다음은 useEffect의 특징이다 1. effect 함수가 실행되는 시점이 고정되어 있다. useEffect의 첫번째 인자로 삽입되는 effect 함수는 리액트 라이프사이클의 "어느 특정부분"에서만 실행된다. 그 외 다른 경로로는 절대로 실행되지 않는다. 그러므로 "이 함수가 언제 실행됐지? 어느 경로에서 실행됐지?" 등등의 고민을 할 필요가 없다 2. effect 함수가 실행되는 조건이 제한적이다 : 의존성 배열이 변경될 때만 실행된다. 즉 불필요한 상황에서 함수를 호출하지 않는다. 이것은 얘기치 못한 작동이 발생할 여지를 줄여준다 3. useEffect는 다른 React hook과 함께 Custom Hook으로 모듈화되어 사용될 수 있다. useState와 useEffect를 묶어서 하나의 커스텀 훅으로 사용하는 패턴은 매우 일반적이다. 이렇게 하면 useEffect의 effect 함수에서 에러가 발생했을 때 그 에러의 추적 범위를 Custom Hooks로 제한할 수 있다 본인이 알고있는 내용은 이 정도이다. 정리하면 매우 제한적인, 통제된 flow를 만들어서 그 flow안에서만 함수가 실행하도록 환경을 조성하는 것이다. 이렇게 하면 코드의 실행을 예측하기가 용이하고 예상치 못한 복잡한 실행 flow로 인해 골머리를 썩일 필요가 없어진다. 바로 이 점이 대수적 효과와 유사한 목표와 설계 원칙을 공유한다는 것으로 해석해도 좋을 것이다