[ 쏙쏙 들어오는 함수형 코딩 ] Function 액션/계산/데이터

 

 

📍들어가기

리액트는 함수형 프로그래밍이다. 

하지만, 이에 맞게 기능을 개발하지 않고 함수를 만들게 된다면 의존성이 깊은 함수를 구현해내 의도하지 않은 버그를 마주할 가능성이 높아진다. 그래서 [원티드]프리온보딩-12월챌린지를 수강하면서 알게 된 액션/계산/데이터로 구현하기를 정리해보려 한다.

---

✨ 액션 / 계산 / 데이터 

함수형 프로그래밍에서 구분해야 될 것은 단 3가지이다.

• 액션 👉 실행 시점과 횟수에 의존, 즉 부수효과가 있는 순수하지 않는 함수
  ex) 이메일 보내기, 데이터 베이스 읽기
  • 단점 
    • 외부 세계에 영향을 줄 수 있음,
    • 테스트 시 로직과 외부 세계를 함께 재현해야 하는 문제 발생 
    • 실행하기 전까지 어떤 일이 발생하는지 알 수 없음
• 계산 👉 입력으로 출력을 계산, 순수함수
  ex) 최댓값 찾기, 이메일 주소가 맞는지 확인
  • 장점
    • 쉽게 테스트 가능
    • 여러 번 테스트해도 문제가 발생하지 않음
    • 조합을 통한 더 큰 계산 가능
    • 실행 횟수나 과거/미래에 실행되었던 것을 신경쓰지 않아도 됨
  • 단점
    • 실행하기 전까지 어떤 일이 발생하는지 알 수 없음
• 데이터 👉 이벤트에 대한 사실
  ex) 사용자가 입력한 이메일 주소, api 호출로 얻은 달러 수량

 

프로그래머는 최대한 시간에 의존하는 액션에서 계산을 빼내야하고, 계산에서 데이터를 분리하는 노력을 해야 한다.

그러나 액션은 소프트웨어가 실행되는 이유이기에 다루기는 쉽지않다.

 

액션을 잘 사용하고 싶다면, 아래의 5가지를 눈여겨 보아라.

1. 가능한 액션을 적게 사용 한다.
2. 가능한 액션을 작게 만든다.
3. 외부 세계와 상호작용하는 것을 제한한다.
4. 호출 시점에 의존하는 것을 제한한다.

---

✨ 명시적 입/출력 , 암묵적 입/출력

함수에는 입력과 출력이 있다. 개발자라면 이것을 모르는 사람은 없을 것이다.

그렇다면, 명시적 입/출력 & 암묵적 입/출력에 대해 들어보았는가 ... ?

 

책에서 이렇게 말하고 있다.

• 명시적 입력 👉 인자
• 명시적 출력 👉 return 값
• 암묵적 입력 👉 인자 외 다른 입력
• 암묵적 출력 👉 리턴값 외 다른 출력 

함수형 프로그래밍을 할 때, 주의해야 할 것은 바로 계산과 데이터로 함수를 구현하는 것이다.  

왜냐하면 함수의 실행 의존성을 낮추기 위해서이기 때문이다. 

 

하지만, 암묵적 입/출력을 가진 함수를 만들게 된다면 액션 함수로 구현되게 된다.

더불어, 개발자라면 대부분 '컴포넌트의 재사용성을 높이기 위한 개발' 을 탐구할 것이다. 

이를 만들어 내는 것이 바로 함수의 입출력을 명시적으로 구현하는 것이다. 

 

조건은 다음과 같다.

1. DOM 업데이트와 비즈니스 규칙은 분리되어야 한다.
   👉 DOM을 업데이트 하는 것은 함수로부터 정보를 받아 실행되는 것이기 때문에 출력이지만, return 값이 아니므로 암묵적 출력이다.
2. 전역변수가 없어야 한다.
3. 전역변수에 의존하지 않아야 한다.
4. DOM을 사용할 수 있는 곳에서 실행된다고 가정하면 안된다.
5. 함수가 결과값을 return해야 한다.
   👉 return 하는 값이 없는 함수는 테스트도 할 수 없고 재사용도 할 수 없다. 

 

5가지 조건으로 우리는 액션에서 계산을 빼내는 연습을 해야 한다. 

🤔 그렇다면 어떻게 빼내려고 노력해야 하는 걸까?

 

 

📌 계산 추출을 단계별로 알아보기

전제는 인자와 return값이 바뀌지 않는 불변값이어야 한다는 것이다.

1. 계산 코드를 찾기 
2. 새 함수에 암묵적 입/출력을 찾기
   • 함수 인자를 포함해 함수 밖에 있는 변수를 읽거나 DB에서 값을 가져오는 것은 입력
   • return 값을 포함해 전역변수를 바꾸거나 공유 객체를 바꾸거나 값을 가져오는 것은 출력
3. 암묵적 입력은 인자로, 암묵적 출력은 return 값으로 변경

위의 3가지 단계로 update_tax_dom을 변환하는 과정이다. 

// 🔥 세금을 계산하는 부분을 추출해보자.
function update_tax_dom(){
	set_tax_dom(shopping_cart_total * 0.20);
}


// ✅ 세금 계산 기능 추출
function calc_tax(amount){
	return amount * 0.20;
}
// 🌟 리팩터링
function update_tax_dom(){
	set_tax_dom(calc_tax(shopping_cart_total));
}

 

계산을 추출하고, 명시적 입/출력을 통해 함수를 분리할 수 있다는 것을 알 수 있다.

 

더 깊은 예제로 이 글을 정리해보자.

 

아래 예제 코드를 보면 계산이나 데이터는 없고 모든 함수가 Action으로 구현되어있다.

// ✅ 전역 변수는 Action
var shopping_cart = [];
var shopping_cart_total = 0;

function add_item_to_cart(name, price){
	// ✅ 전역 변수를 바꾸는 것도 Action
	shopping_cart.push({name, price});
    calc_cart_total();
}

function update_shopping_icons(){
	// ✅ DOM을 가져오는 것도 Action
	const buy_btns = get_buy_btns_dom();
    for(let idx = 0 ; idx < buy_btns.length ; idx++){
    	const current_btn = buy_btns[idx];
        const current_item = current_btn.item;
        
        // ✅ DOM을 변경하는 것도 Action
        if(current_item.price + shopping_cart_total >= 20){
        	current_btn.show_free_shopping_icon();
        } else {
        	current_btn.hide_free_shopping_icon();
        }
    }
}

function update_tax_dom(){
	set_tax_dom(shopping_cart_total * 0.20);
}

function calc_cart_total(){
	// ✅ 전역 변수를 바꾸는 것도 Action
	shopping_cart_total = 0;
    for(let idx = 0 ; idx < shopping_cart.length ; idx++){
    	const current_item = shopping_cart[idx];
        shopping_cart_total += current_item.price
    }
    set_cart_total_dom();
    update_shopping_icons();
    update_tax_dom();
}

 

먼저 계산을 빼내보자. 

var shopping_cart = [];
var shopping_cart_total = 0;

function calc_cart_total(){
	// 1️⃣ 서브루틴을 추출한다
	shopping_cart_total = calc_total(shopping_cart);
    set_cart_total_dom();
    update_shopping_icons();
    update_tax_dom();
}
// 2️⃣ 명시적 입출력 사용
function calc_total(cart){
	// 3️⃣ 지역변수 사용
	let total = 0;
    for(let idx = 0 ; idx < cart.length ; idx++){
    	const current_item = cart[idx];
        total += current_item.price
    }
    return total;
}

먼저 calc_cart_total안에 있는 비즈니스 로직을 서브루틴으로 추출하여 함수를 생성한다.

생성된 함수가 명시적 입/출력을 사용하도록 구현하고, 내부에서는 지역변수로 값을 계산하는 과정을 거친다.

 

그 결과, 장바구니에 담긴 아이템들의 가격 총합을 계산하는 계산 함수가 완성되었다.

우리는 이에 대한 결과를 전역 변수에 저장하는 것으로 리팩터링을 진행할 수 있다.

 

또 다른 계산을 빼내보자.

var shopping_cart = [];
var shopping_cart_total = 0;

function add_item_to_cart(name, price){
// 1️⃣ 전역변수 직접 변경 👉 계산 함수의 결과로 변경
    shopping_cart = add_item(shopping_cart, name, price);
    calc_cart_total();
}
// 2️⃣ 계산 함수 구현
function add_item(cart, name, price){
// 3️⃣ 복사본 생성 후 변경하여 return 
    const new_cart = cart.slice();
    new_cart.push({name, price});
    return new_cart;
}

 

전역변수를 직접변경하는 것 대신,

내부의 복사본을 사용하고 명시적 입출력을 통해 계산된 결과를 반환하는계산 함수를 구현하여 분리할 수 있다.

 

이외에도 update_shopping_icons( ) 내부의 if 문도 비즈니스 규칙으로 계산되는 지점이라 분리할 수 있다.

한 번 직접 해보길 권장한다.

 

---

🤔 이런 설계는 왜 필요한 것일까..?

실무를 접하다보면, 설계 없이 기능 구현에 급급한 경우가 대부분이다.

하지만, 설계가 잡혀있지 않은 코드에 기능이 더해지면서 관심사가 여러 개 생성되어 결국 엉켜버린 함수로 변할 것이다.

 

그래서 우리는 함수를 사용할 때 관심사를 분리하여 1개의 함수가 1개의 관심사를 다룰 수 있도록 설계 하는 것이 필요하다.

 

함수가 많아진다고 생각할 수 있지만,

엉켜있는 것을 분리하는 것보다 흩어져있는 것을 조합해서 사용하는게 유지보수 측면에서 더 유리하다.

 

이것이 바로 재사용성과 테스트의 용이성을 높이기 위한 기초 단계임을 잊지말고, 

액션/계산/데이터로 분리해내는 연습을 지속적으로 도입해보아야 한다. 

 

---

📚 참고자료

• 쏙쏙 들어오는 함수형 코딩