더 좋은 액션 만들기

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

액션은 필요하다. 모든 액션을 없앨 수는 없다.

액션에서 암묵적 입/출력을 줄여 설계를 개선하자

암묵적 입력과 출력은 적을수록 좋다

계산 뿐만 아니라, 액션에서도

• 어떤 함수에 암묵적 입/출력이 있다면 다른 컴포넌트와 강하게 연결된 컴포넌트
• 다른 곳에서 사용할 수 없기 때문에 모듈이 아님

암묵적 입/출력 줄이는 방법

• 전역/공용 변수를 직접 사용하는 대신 인자를 전달
• 중복, 불필요한 코드 있는지 확인
• 과한 코드는 다른 함수 안으로 옮기기

계산 분류하기

의미 있는 계층별로 계산 분류

• 장바구니 코드
  • cart에 대한 동작
  • item에 대한 동작
  • 비즈니스 규칙: 일반적인 전자상거래 서비스와는 다른 이 서비스만의 특별한 규칙

엉켜있는 코드 풀기

설계는 엉켜있는 코드를 푸는 것

• 함수를 사용하면 관심사를 자연스럽게 분리할 수 있음
• 분리된 것은 언제든 쉽게 조합할 수 있음

addItem()을 분리해 더 좋은 설계 만들기

기존코드

• 간단해 보이지만 4가지 역할을 하고 있음
• cart와 item 구조를 모두 알고 있음

function addItem(cart, name, price) {
  // 1. 배열 복사
  const newCart = cart.slice();
  // 2. item 객체 생성
  // 3. 복사본에 item 추가
  newCart.push({ name, price });
  // 4. 복사본 리턴
  return newCart;
}

item에 관한 코드를 별도 함수로 분리

• makeCartItem: item 구조만 알고 있는 함수
• addItem: cart 구조만 알고 있는 함수
• 👉 cart, item을 독립적으로 확장할 수 있음

function makeCartItem(name, price) {
  return { name, price };
}

function addItem(cart, item) {
  const newCart = cart.slice();
  newCart.push(item);
  return newCart;
}

copy-on-write 패턴 빼내기

• addItem은 크기가 작고 괜찮은 함수이지만
• copy-on-write를 사용해 배열에 항목을 추가하는 함수이므로, 이 부분을 분리
• 어떤 배열/항목에도 쓸 수 있는 유틸리티 함수로 분리

// `copy-on-write` 분리
function addElementLast(array, elem) {
  const newArray = array.slice();
  newArray.push(elem);
  return newArray;
}

function makeCartItem(name, price) {
  return { name, price };
}

function addItem(cart, item) {
  return addElementLast(cart, item);
}

계산 분류 다시하기

• 장바구니 코드
  • cart에 대한 동작
  • item에 대한 동작
  • 비즈니스 규칙
  • 배열 유틸리티 👈 새로 추가됨