[ 타입스크립트(TypeScript) ] 핸들러 함수내부에서 중복으로 사용되는 함수 리팩토링하기

📍 핸들러 함수 내부에서 중복으로 사용되는 함수 리팩토링 하기

React로 컴포넌트가 아닌 컴포넌트 내부에서 onClick시 동작하는 handler함수를 만들다 보면, handler 함수 내부에서 사용되는 함수를 조건으로 분기할 때 해당 함수가 중복으로 사용하는 경우가 종종 있다. 이번 포스팅은 애자일 소프트웨어 개발 방법의 하나인 페어 프로그래밍(Pair programming)으로 작업을 하다가 네비게이터(navigator)를 맡고 계신 헤일리가 발견해주신 케이스인데, 조건에 의해 인자 값이 바뀌어도 함수는 동일하게 사용할 때 중복되는 코드를 어떻게 하나로 합쳤는가에 대해 작성해보려 한다. 하단 코드는 리팩토링 전 clickEventHandler 함수의 코드이다.

 

이 코드로 컴파일하는데 에러는 없지만 리액트를 다뤄본 개발자라면 같은 역할을 하지만 중복된 코드를 봤다면 하나로 합치고 싶다는 생각이 뿜뿜 할 것이고 코드를 어떻게 개선했는지에 대해 작성해봤다. 리팩토링은 여러 가지 방법이 있고, 개발자마다 그 방법이 다르기 때문에 이런 방법도 있구나라는 것에 초점을 맞춰주면 감사하겠다.(댓글에 피드백을 달아주시는 것도 물론 환영이다.) 그럼 초기 코드를 한번 살펴보자.(바쁘지 않다면 직접 리팩토링해보자.)

728x90

// AS-IS
function clickEventHandler(
  onLinkClick?: LinkEventHandlerType,
  onImageClick?: ImageEventHandlerType,
): ImageEventHandlerType {
  return (event, image) => {
    if (image.link && image.link.hash && onLinkClick) {
      return onLinkClick(event, {
         href: `#${image.link.hash}`,
      })
    }
    if (image.link && image.link.href && onLinkClick) {
      return onLinkClick(e, {
          href: image.link.href,
        })
    } else if (onImageClick) {
      return onImageClick(event, image)
    }
  }
}

중복되는 코드를 찾았는가? 나는 7번과 12번의 image.link && onLinkClick 코드가 중복되는 것을 찾았다. 더 좋은 방법도 있겠지만 image.link && onLinkClick를 하나의 조건문으로 합쳐보았다.

function clickEventHandler(
  onLinkClick?: LinkEventHandlerType,
  onImageClick?: ImageEventHandlerType,
): ImageEventHandlerType {
  return (event, image) => {
    if (image.link && onLinkClick) {
      if (image.link.hash) {
        return onLinkClick(event, {
          href: `#${image.link.hash}`,
        })
      }

      if (image.link.href) {
        return onLinkClick(e, {
          href: image.link.href,
        })
      } else if (onImageClick) {
        return onImageClick(event, image)
      }
    }
  }
}

이렇게 하나의 조건문으로 합치고 났는데, 다음엔 어떻게 리팩토링하면 좋을까?! 여러 가지 방법이 있지만, 나는 onLinkClick의 중복 사용을 줄이고 싶었다. 그래서 onLinkClick 함수를 한 번만 사용하기 위해 image.link.hash와 image.link.href값을 삼항 연산자로 따로 빼내어 변수로 선언했다.

function clickEventHandler(
  onLinkClick?: LinkEventHandlerType,
  onImageClick?: ImageEventHandlerType,
): ImageEventHandlerType {
  return (event, image) => {
    if (image.link && onLinkClick) {
      const href = image.link.hash ? `#${image.link.hash}` : image.link.href
      return onLinkClick(event, { href })
    } else if (onImageClick) {
      return onImageClick(event, image)
    }
  }
}

마지막으로 구조분해할당 문법을 사용하여 마무리했다. 7번 라인에서 href: prevHref로 작성한 이유는 8번 라인에서 href 변수로 선언해야 onLinkClick 함수의 두 번째 인자를 { href: href } 대신 { href }로 사용할 수 있기 때문이다.

function clickEventHandler(
  onLinkClick?: LinkEventHandlerType,
  onImageClick?: ImageEventHandlerType,
): ImageEventHandlerType {
  return (event, image) => {
    if (image.link && onLinkClick) {
      const { hash, href: prevHref } = image.link
      const href = hash ? `#${hash}` : prevHref
      return onLinkClick(event, { href })
    } else if (onImageClick) {
      return onImageClick(event, image)
    }
  }
}

결론적으로 리팩토링 전과 후의 코드는 다음과 같다.

// AS-IS
function clickEventHandler(
  onLinkClick?: LinkEventHandlerType,
  onImageClick?: ImageEventHandlerType,
): ImageEventHandlerType {
  return (event, image) => {
    if (image.link && onLinkClick) {
      if (image.link.hash) {
        return onLinkClick(event, {
          href: `#${image.link.hash}`,
        })
      }

      if (image.link.href) {
        return onLinkClick(e, {
          href: image.link.href,
        })
      } else if (onImageClick) {
        return onImageClick(event, image)
      }
    }
  }
}

// TO-BE
function clickEventHandler(
  onLinkClick?: LinkEventHandlerType,
  onImageClick?: ImageEventHandlerType,
): ImageEventHandlerType {
  return (event, image) => {
    if (image.link && onLinkClick) {
      const { hash, href: prevHref } = image.link
      const href = hash ? `#${hash}` : prevHref
      return onLinkClick(event, { href })
    } else if (onImageClick) {
      return onImageClick(event, image)
    }
  }
}

이렇게 중복 사용되어 불필요하게 길어진 너저분한 코드를 리팩토링해봤다. 이번 리팩토링의 규모는 크진 않지만 작은 코드부터 리팩토링하다보면 언젠가 규모가 큰 코드도 금방 리팩토링 할 수 있지 않을까..?라는 생각을 하며 이번 포스팅을 마친다.

 

Reference

1. 페어 프로그래밍 - 위키백과
2. 구조 분해 할당 - MDN