[TECH-QA] Lodash compact 함수

Posted 4 days Updated 4 days

By 베짱이가 되고싶은 개미。

compact 함수는 배열에서 falsy 값(null, undefined, false, 0, '', NaN 등)을 제거하여 유효한 객체만 포함하는 새로운 배열을 반환하는 유틸리티 함수입니다. 이는 배열을 정리하거나 필터링할 때 사용됩니다.

actionButtons={compact([
  { type: 'secondary', label: '취소', action: handleCancel },
  data?.needsExpiry && { type: 'primary_light', label: '확인', action: handleSaveExpiry },
])}

여기서 compact는 배열 내 두 번째 요소가 조건문(data?.needsExpiry && ...)에 따라 undefined 또는 false가 될 수 있는 경우를 처리합니다. data?.needsExpiry가 false이거나 undefined이면 해당 요소는 제외되고, actionButtons에는 유효한 버튼 객체만 포함됩니다.

📝 data.needsExpiry가 true인 경우

compact([
  { type: 'secondary', label: '취소', action: handleCancel },
  { type: 'primary_light', label: '확인', action: handleSaveExpiry }
])

결과: [{ type: 'secondary', label: '취소', action: handleCancel }, { type: 'primary_light', label: '확인', action: handleSaveExpiry }]

📝 data.needsExpiry가 false이거나 undefined인 경우

compact([
  { type: 'secondary', label: '취소', action: handleCancel },
  undefined // data?.needsExpiry && ...는 falsy이므로 undefined
])

→ 결과: [{ type: 'secondary', label: '취소', action: handleCancel }]

compact는 배열에서 falsy 값을 제거하여 UI 컴포넌트(여기서는 버튼 목록)를 동적으로 렌더링할 때 유효한 데이터만 포함하도록 합니다.
조건부 버튼 렌더링 시 유용하며, 코드의 안정성과 간결성을 유지하는 데 기여합니다.
이 함수는 Lodash의 _.compact와 유사한 역할을 하며, React 같은 프레임워크에서 동적 UI 렌더링에 자주 사용됩니다.