[React Native/RN] lodash 사용하기 (findIndex(), flatten(), remove() 사용해보기)

 

lodash 란?

lodash는 JavaScript의 유틸리티 라이브러리 중 하나로, 개발에서 자주 사용되는 일반적인 작업을 간단하게 처리할 수 있는 메서드와 함수를 제공한다. lodash는 배열과 객체를 다루는 함수를 포함하여 다양한 유틸리티 함수를 제공한다. 예를 들어, 배열의 요소를 반복하고 조작하는 함수, 객체를 다루는 함수, 함수를 조작하는 함수 등이 있다.

 

 

lodash 설치

npm install lodash

 

 

findIndex() 함수

findIndex() 함수는 배열에서 특정 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.

 

import { findIndex } from 'lodash';

const array = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' },
];

const index = findIndex(array, { name: 'Banana' });

console.log(index); // 1

위 코드에서는 배열 array에서 name이 'Banana'인 요소의 인덱스를 구하고 있다. 결과는 1이 출력된다.

 

flatten(), flattenDeep() 함수

flatten() 함수는 중첩된 배열을 평탄화하여 하나의 배열로 만들어준다. 하지만 flatten() 함수는 인자로 전달된 배열의 첫 번째 깊이(depth)까지만 평탄화한다. 만약 첫 번째 깊이 이상의 배열이 있다면 그대로 유지된다.

이를 대신해 flattenDeep() 함수를 사용하면 배열의 모든 깊이(depth)를 평탄화한다. 즉, 중첩된 배열이 몇 단계든 모두 하나의 배열로 만들어준다.

 

import { flatten, flattenDeep } from 'lodash';

const array = [1, [2, [3, [4]], 5]];

const flattenArray = flatten(array);
const flattenDeepArray = flattenDeep(array);

console.log(flattenArray); // [1, 2, [3, [4]], 5]
console.log('flattenDeepArray: ', flattenDeepArray); // [1, 2, 3, 4, 5]

 

 

remove() 함수

remove() 함수는 배열에서 특정 조건을 만족하는 요소를 제거한다.

 

import { remove } from 'lodash';

const array = [1, 2, 3, 4, 5];

const removedArray = remove(array, n => n % 2 === 0);

console.log(array); // [1, 3, 5]
console.log(removedArray); // [2, 4]

위 코드에서는 배열 array에서 짝수를 제거하고, 제거된 요소들을 removedArray 변수에 할당하고 있다. 결과는 array 배열에는 홀수만 남고, removedArray 배열에는 제거된 요소인 [2, 4]가 출력된다.