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

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

프론트엔드 개발에서 lodash-es는 매우 유용한 유틸리티 라이브러리입니다. 이 라이브러리는 다양한 JavaScript 작업을 간소화하고 최적화하는 데 도움을 주는 함수들을 제공합니다. 특히 실무에서는 데이터 처리, 성능 최적화, 비동기 작업 관리 등 다양한 상황에서 lodash-es의 함수들이 빈번하게 사용됩니다.

 

lodash-es는 ES 모듈 시스템을 지원하여 트리 쉐이킹이 가능하므로, 필요한 함수만 가져와 사용할 수 있어 번들 크기를 최적화할 수 있습니다. 이는 웹 애플리케이션의 성능 향상에 기여합니다. 또한, lodash-es의 함수들은 크로스 브라우저 호환성이 뛰어나 다양한 환경에서 일관된 동작을 보장합니다.

 

프론트엔드 개발자들은 lodash-es를 통해 복잡한 데이터 구조를 쉽게 다루고, 반복적인 코드를 줄이며, 더 읽기 쉽고 유지보수가 용이한 코드를 작성할 수 있습니다. 이는 개발 생산성 향상으로 이어집니다. 이제 실무에서 자주 사용되는 lodash-es 함수들과 그 활용 패턴에 대해 살펴보겠습니다.

다음은 실무에서 자주 사용하는 lodash-es의 유용한 함수 5개와 그 예제 및 상세 설명입니다.

---

1. _.get - 안전한 객체 속성 접근

_.get은 객체의 중첩된 속성에 안전하게 접근할 수 있도록 도와줍니다. 속성이 존재하지 않을 경우 기본값을 반환합니다.

import { get } from 'lodash-es';

const user = {
  profile: {
    name: '홍길동',
    address: {
      city: '서울'
    }
  }
};

const city = get(user, 'profile.address.city', '기본값');
console.log(city); // '서울'

const country = get(user, 'profile.address.country', '기본값');
console.log(country); // '기본값'

설명:

• get은 중첩된 객체에서 안전하게 값을 가져옵니다.
• 접근하려는 경로가 존재하지 않으면 에러를 발생시키지 않고 기본값을 반환합니다.
• API 응답 데이터나 복잡한 객체 구조를 다룰 때 유용합니다.

---

2. _.debounce - 함수 호출 지연

_.debounce는 연속적인 함수 호출을 지연시켜 성능을 최적화합니다.

import { debounce } from 'lodash-es';

const saveInput = debounce((value) => {
  console.log('Saving data:', value);
}, 300);

saveInput('입력1');
saveInput('입력2'); // 마지막 호출만 실행됨

설명:

• debounce는 마지막 호출 후 일정 시간(밀리초)이 지나면 함수를 실행합니다.
• 실시간 검색, 윈도우 크기 조정 이벤트 등에서 불필요한 연속 호출을 방지할 때 유용합니다.

---

3. _.uniq - 배열 중복 제거

_.uniq는 배열에서 중복된 요소를 제거합니다.

import { uniq } from 'lodash-es';

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = uniq(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

설명:

• 배열 내 중복된 값을 제거하고 고유한 값들만 반환합니다.
• 데이터 정리나 중복 제거가 필요한 상황에서 유용합니다.

---

4. _.merge - 깊은 객체 병합

_.merge는 여러 객체를 깊게 병합하여 새로운 객체를 만듭니다.

import { merge } from 'lodash-es';

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const mergedObj = merge({}, obj1, obj2);
console.log(mergedObj); // { a: { b: 1, c: 2 } }

설명:

• merge는 객체의 중첩된 속성까지 병합합니다.
• 상태 관리나 설정 데이터를 병합할 때 유용합니다.

---

5. _.groupBy - 데이터 그룹화

_.groupBy는 배열의 요소를 특정 기준에 따라 그룹화합니다.

import { groupBy } from 'lodash-es';

const users = [
  { name: '홍길동', age: 20 },
  { name: '김철수', age: 20 },
  { name: '이영희', age: 25 }
];

const groupedByAge = groupBy(users, 'age');
console.log(groupedByAge);
// {
//   "20": [{ name: "홍길동", age: 20 }, { name: "김철수", age: 20 }],
//   "25": [{ name: "이영희", age: 25 }]
// }

설명:

• 배열을 특정 속성 값에 따라 그룹화하여 객체로 반환합니다.
• 데이터 분석이나 테이블 정렬 등에 유용합니다.

---

요약

함수	주요 기능	사용 사례
_.get	안전한 객체 속성 접근	API 응답 데이터 처리, 중첩된 속성 접근
_.debounce	함수 호출 지연	실시간 검색, 윈도우 리사이즈 이벤트
_.uniq	배열 중복 제거	데이터 정리 및 중복 제거
_.merge	깊은 객체 병합	상태 관리 데이터 병합
_.groupBy	배열 요소를 기준으로 그룹화	데이터 분석 및 테이블 정렬

 

이 함수들은 실무에서 데이터를 조작하거나 성능을 최적화하고 유지보수성을 높이는 데 매우 유용하게 사용됩니다. Lodash-es의 트리 쉐이킹 기능을 활용하면 필요한 함수만 번들에 포함시켜 프로젝트 크기를 줄일 수 있습니다.