[함수형 코딩] 반응형 아키텍처와 어니언 아키텍처 (+ 짧은 책 후기)

쏙쏙 들어오는 함수형 코딩

 

반응형 아키텍처와 어니언 아키텍처는 독립적으로 사용되며, 따로 혹은 같이 사용도 가능한 아키텍처이다. 책에 나온 내용과 이에 더해 내 생각을 덧붙여 정리해보려고 한다.

반응형 아키텍처

책에 나온 내용을 바탕으로 설명하자면, 반응형 아키텍처는 순차적 액션의 순서를 뒤집으며, 효과와 원인을 분리하여 코드에 복잡하게 꼬인 부분을 풀 수 있다고 한다.

하지만 이 내용만을 읽었을 때는 "그래서 뭐라는거야?"라는 생각이 먼저 들었다. 사실 몇 가지의 말보다는 뒤에서 나오는 예시들을 보며 "이런거구나~"라는 생각이 들었던만큼, 반응형 아키텍처에 대해 쉽게 이해할 수 있었던 예시 코드를 공유한다.

function ValueCell(initialValue) {
    var currentValue = initialValue;
    return {
    	val: function() {
            return currentValue;
        },
        update: function(f) {
            var oldValue = currentValue;
            var newValue = f(oldValue);
            currentValue = newValue;
        }
    };
}

위 코드는 아래처럼 사용할 수 있다. ValueCell을 사용할 때, 셀 값을 하나 바꾸면 그에 대한 반응으로 함수가 다시 계산한다.

var shopping_cart = ValueCell({});

function add_item_to_cart(name, price) {
    var item = make_cart_item(name, price);
    shopping_cart.update(function(cart) {
    	return add_item(cart, item);
    });
    var total = calc_total(shopping_cart.val());
    set_cart_total_dom(total);
    update_shipping_icons(shopping_cart.val());
    update_tax_dom(total);
};

 

예시 코드를 보면서 뭔가 묘하게 익숙한 느낌이 났는데, 바로 React의 useState였다. ValueCell를 호출하여 초기화 한 후, val로 값을 읽어오고 update를 통해 값을 업데이트한다. 실제 useState와 사용하는 방식은 약간 다르지만, 전반적인 형태 자체가 비슷하다는 생각이 들었다. 이 외에도 watcher를 추가할 수도 있는데, 이를 활용하여 아래처럼 특정 값이 변경될 때 실행할 액션을 추가할 수도 있다.

// cart_total이 변경될 때 실행할 함수를 정할 수 있다.
cart_total.addWatcher(set_cart_total_dom);
cart_total.addWatcher(update_tax_dom);

책에서 반응형 아키텍처에 대한 부분을 읽다보면, '웹 서비스와 UI에 잘 어울린다'고 되어있다. 웹에서는 값의 변경에 따라 여러 화면에서 업데이트를 해주어야 하는만큼, 왜 적절하다고 말하는지에 대해 이해가 되고 공감했다.

 

어니언 아키텍처

어니언 아키텍처는 책의 앞부분에 계속해서 나왔던 액션/계산 함수의 분리에 대해 읽었다면 익숙한 아키텍처이다. 이 부분은 어니언 아키텍처 규칙과 각 계층별 예시만 간단하게 설명하고 넘어가려고 한다.

어니언 아키텍처 규칙

• 현실 세계와 상호작용은 인터랙션 계층에서 해야 한다.
• 계층에서 호출하는 방향은 중심 방향이다. (인터랙션 -> 도메인 -> 언어)
• 계층은 외부에 어떤 계층이 있는지 모른다.

계층별 예시

• 인터렉션 계층 : 국회 도서관 API를 사용, 도서관 고객에게 대출 화면을 표시하는 것
• 도메인 계층 : 주제에 따라 책 분류를 결정하는 것
• 언어 계층 : Lodash 자바스크립트 라이브러리

 

여기까지 간단하게 반응형 아키텍처와 어니언 아키텍처에 대해 정리해보았다. 이후에는 책의 전반과 이후 방향성에 대해 정리하는 챕터로 이어지며 책 한 권이 마무리된다.

 

함수형 코딩이란 도대체 어떤 걸 말하는걸까에 대한 궁금증으로 시작한 스터디였는데, 생각보다 얻은 인사이트가 많은 책이었다. 물론 가끔은 좀 과하다고 생각되는 부분이 분명 있었고, 효율적이지 않다고 생각하는 부분도 있었지만, 이 책의 초반부터 나오는 '계산', '액션'에 대한 명확한 이해만 한다면 이것 만으로도 당장 개선할 부분이 보이고 작게 개선을 시작할 수 있는 기회가 될거라고 생각한다.