Lodash 라이브러리 사용법

Lodash를 사용하면 어떤 점이 좋을까?

zurang23

2023년 05월 30일 · 0 분 소요

들어가며

이번에 데이터 가공할 일이 있어서 작업을 하던 중 태용 팀장님께서 선 작업해 주신 코드를 보다 보니 Lodash라는 것을 사용한 것이 보였습니다. 이건 어디에 쓰는 거지? 어떻게 쓰는 거지? 하고 찾다 보니, 생각보다 굉장히 유용했고, 한번 정리해두면 다음에 사용할 때 좋을 것 같아서 이렇게 정리하게 되었습니다.

Lodash를 사용하면 어떤 점이 좋을까?

브라우저에서 지원하지 않는 다양한 메서드를 지원하여 코드를 훨씬 간략하게 줄여줍니다.
Lodash를 사용함으로 성능/퍼포먼스 개선에 도움을 받을 수도 있습니다.

Lodash 설치

Lodash는 패키지로 관리되고 있어 쉽게 install 한 뒤에 사용할 수 있습니다.

npm i -g npm
npm i --save lodash

Lodash import

import _ from 'lodash';

Lodash 활용

Lodash에는 정말 다양한 메서드가 있습니다. 여기서 제가 사용해 본 메서드 위주로 설명해 보겠습니다.

chunk

_.chunk(array, [(size = 1)]);

배열을 사이즈에서 정의한 길이에 맞게 잘라서 새로운 배열로 반환합니다. (이때 균등하게 분할이 되지 않는 경우 마지막 요소는 나머지 요소로만 반환됩니다.)

const numberArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newNumberArray = _.chunk(numberArray, 3);
// 결과
newNumberArray = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]];

fill

_.fill(array, value, [(start = 0)], [(end = array.length)]);

정의된 값으로 새로운 배열을 만들어 채우거나, 기존 배열의 값을 한 번에 바꿀 때 사용합니다.

const numberArray = [1, 2, 3];
const newNumberArray = _.fill(array, 'a');
// 결과
newNumberArray = ['a', 'a', 'a'];
const newNumberArray = _.fill(Array(3), 0);
// 결과
newNumberArray = [0, 0, 0];

sum

_.sum(array);

배열의 합을 반환합니다.

const numberArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const sum = _.sum(numberArray);
// 결과
sum = 45;

each, forEach

_.forEach(collection, [(iteratee = _.identity)]);

배열 내 요소를 반복하여 함수를 호출합니다. (일반적으로 쓰는 forEach 문과 비슷)

_.forEach([1, 2], function (value) {
  console.log(value);
});
// 결과
// 1
// 2
_.forEach({ a: 1, b: 2 }, function (value, key) {
  console.log(key);
});
// 결과
// 'a'
// 'b'

orderBy

_.orderBy(collection, [(iteratees = [_.identity])], [orders]);

배열 내 요소를 오름차순 또는 내림차순으로 정렬하여 새로운 배열로 반환합니다. (오름차순: asc (기본값), 내림차순: desc)

const users = [
  { user: 'fred', age: 48 },
  { user: 'barney', age: 34 },
  { user: 'fred', age: 40 },
  { user: 'barney', age: 36 },
];
const orderBy = _.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// 결과
orderBy = [
  {
    user: 'barney',
    age: 36,
  },
  {
    user: 'barney',
    age: 34,
  },
  {
    user: 'fred',
    age: 48,
  },
  {
    user: 'fred',
    age: 40,
  },
];

map

_.map(collection, [(iteratee = _.identity)]);

배열 또는 객체 내 요소를 반복하여 함수를 호출한 뒤 새로운 배열로 반환합니다.

const square = (n) => {
  return n * n;
};

const map = _.map([4, 8], square);
// 결과
map = [16, 64];

_.map({ a: 4, b: 8 }, square);
// 결과
map = [16, 64];

const users = [{ user: 'barney' }, { user: 'fred' }];

// users 배열에서 'user' 키 값만으로 배열 반환
_.map(users, 'user');
// 결과
map = ['barney', 'fred'];

이 외에도 이번에 경험한 프로젝트에서는 filter와, some, escapeRegExp, isEqual를 사용했었는데, 글이 너무 길어지는 것 같아 생략했습니다. 제가 경험한 Lodash는 정말 극히 일부분이었고 아래 공식 문서에 설명된 것을 보면 없는 기능이 있을까? 싶을 정도로 다양한 메서드들이 있습니다. 처음 Lodash에 대해서 이것저것 찾아볼 때 단순히 코드만 줄여줄 뿐 다른 이점이 없다면 굳이 네이티브 문법이 아닌 무거운 라이브러리를 사용할 필요가 있을까라는 생각도 했습니다. 하지만 사용해 보니 단순히 작업 코드만 줄어든다고 하기에는 Lodash 함수의 확장성이 꽤나 유용했습니다. map만 하더라도 네이티브 문법으로 사용 시에는 배열밖에 사용하지 못하지만 _.map은 객체 자체를 map을 돌려 사용할 수 있었으니깐요.

마치며

라이브러리를 사용하는 것을 선호하는 편은 아니지만 페이지 성능에 무리가 가지 않고 다양한 확장성으로 개발 사용성이 확장된다면 이 정도 라이브러리 사용은 충분히 권장할만하지 않았나 싶습니다.

참고문서 : lodash 공식 문서