초간단 lodash 사용하여 list 배열 정렬하기(feat. react)

#Lodash Document

Lodash Documentation

 

지난 번에 lodash를 사용하여 배열의 중복을 제거하는 방법을 알아봤는데, 이번에는 lodash를 이용하여 초간단 배열 정렬하는 방법에 대해서 알아볼까 한다.

 

지난 번 lodash 중복 제거 글도 링크를 걸어두겠다.

#lodash uniqBy로 중복제거하기

Object List 배열을 lodash uniqBy로 간단하게 중복 제거하기 (feat. react)

 

npm 환경

lodash 설치

npm i lodash

 
 

object list 정렬하기

// imports
import { orderBy } from "lodash";

...

// 데이터 설정
const datas = [
    {
    	value1: 2,
    	value2: 'vue',
    	value3: 'v2'
    },
	{
    	value1: 3,
    	value2: 'python',
    	value3: 'v3'
    },
	{
    	value1: 1,
    	value2: 'react',
    	value3: 'v4'
    }
]

...

// 정렬하기
console.log(orderBy(datas, "value1"));

 

orderBy 에 첫번째 전달인자는 배열을 넣고, 두번째 전달인자에는 정렬이 기준이 되는 항목을 넣어주면 된다.

 

정렬은 세번째 전달인자를 비워둘 경우, 기본적으로 오름차순으로 정렬한다. 

데이터 확인

[
	{
    	value1: 1,
    	value2: 'react',
    	value3: 'v4'
    },
    {
    	value1: 2,
    	value2: 'vue',
    	value3: 'v2'
    },
	{
    	value1: 3,
    	value2: 'python',
    	value3: 'v3'
    }
]

 

내림차순이나 가독성을 위해서 내림차순, 오름차순을 선언하여 사용하고 싶다면, 세번째 전달인자를 사용하면 된다.

// 내림차순 정렬하기
console.log(orderBy(datas, "value1", "desc"));

// 오름차순 정렬하기
console.log(orderBy(datas, "value1", "asc"));