실무에서 자주 사용하는 lodash-es 함수 패턴2

프론트엔드 개발에서 lodash-es는 강력한 유틸리티 라이브러리로 널리 사용되고 있습니다. 이 라이브러리는 복잡한 데이터 처리, 성능 최적화, 그리고 일반적인 프로그래밍 작업을 간소화하는 다양한 함수를 제공합니다. 

 

ES 모듈 시스템을 지원하는 lodash-es는 트리 쉐이킹을 통해 필요한 함수만을 번들에 포함시킬 수 있어, 최종 애플리케이션의 크기를 최적화하는 데 도움을 줍니다. 이는 웹 성능 향상에 크게 기여합니다. 이제 실무에서 특히 유용하게 사용되는 lodash-es 함수 5가지와 그 활용 패턴을 살펴보겠습니다.

_.cloneDeep - 깊은 복사

import { cloneDeep } from 'lodash-es';

const originalObject = {
  a: 1,
  b: { c: 2 },
  d: [3, 4]
};

const clonedObject = cloneDeep(originalObject);
console.log(clonedObject); // { a: 1, b: { c: 2 }, d: [3, 4] }

cloneDeep 함수는 객체나 배열을 깊은 수준까지 완전히 복사합니다. 중첩된 객체나 배열도 새로운 참조로 복사되어, 원본 데이터의 변경이 복사본에 영향을 주지 않습니다.

_.flatten - 배열 평탄화

import { flatten } from 'lodash-es';

const nestedArray = [1, [2, [3, 4]], 5];
const flattenedArray = flatten(nestedArray);
console.log(flattenedArray); // [1, 2, [3, 4], 5]

flatten 함수는 중첩된 배열을 1단계 평탄화합니다. 복잡한 데이터 구조를 단순화할 때 유용하며, 더 깊은 수준의 평탄화가 필요한 경우 flattenDeep을 사용할 수 있습니다.

_.pick - 객체에서 특정 속성만 선택

import { pick } from 'lodash-es';

const user = {
  id: 1,
  name: '홍길동',
  age: 30,
  email: 'hong@example.com'
};

const userInfo = pick(user, ['name', 'email']);
console.log(userInfo); // { name: '홍길동', email: 'hong@example.com' }

pick 함수는 객체에서 지정된 속성만을 선택하여 새 객체를 만듭니다. API 응답 데이터에서 필요한 정보만 추출하거나, 객체를 간소화할 때 유용합니다.

_.isEqual - 깊은 비교

import { isEqual } from 'lodash-es';

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(isEqual(obj1, obj2)); // true
console.log(isEqual(obj1, obj3)); // false

isEqual 함수는 두 값의 깊은 비교를 수행합니다. 객체나 배열의 내용이 동일한지 확인할 때 유용하며, 단순한 참조 비교로는 불가능한 복잡한 구조의 비교를 가능하게 합니다.

이러한 lodash-es 함수들은 복잡한 데이터 구조를 다루는 실무에서 매우 유용하게 사용됩니다. 각 함수는 특정 상황에서 코드를 간결하고 효율적으로 만들어 줍니다.