2021년 12월 둘째주 WIL

lodash - orderBy() 함수

 

Table 헤더 버튼을 클릭하면 오름차순, 내림차순 정렬이 왔다 갔다 하면서 하위 내용들이 정렬되는 기능을 구현해야 하는 때였다.

처음 lodash에 orderBy 함수 존재를 모를 당시, 눌리는 헤더 버튼의 타입(email, name, 날짜)에 따라 조건을 달리 줘서 정렬을 일일이 시키고 true/false를 최종적으로 return 시켜서 true를 반환하면 오름차순 정렬, false를 반환하면 내림차순 정렬을 시키는 방식으로 구현했었다.

 

그러다 보니 코드가 좀 길어져서 상당히 많은 부분을 차지했었는데 lodash에 orderBy() 함수의 존재를 알게 되자 아래의 긴~ 코드가 한 줄로 순식간에 정리가 되었다....

 

// orderBy 사용전

const handleClickSortBtn = (buttonValue: string) => {
    
  const temp = [...userInfoList];
      // 오름차순
      const ascending = (x: any, y: any) => {
        if (x < y) return -1;
        if (x > y) return 1;
        return 0;
      };
      // 내림차순
      const descending = (x: any, y: any) => {
        if (x < y) return 1;
        if (x > y) return -1;
        return 0;
      };
      switch (buttonValue) {
        case 'email': {
          const sortEmail = temp.sort((a, b) => {
            const x = a.email.toLowerCase();
            const y = b.email.toLowerCase();
            return !isSortEmail ? ascending(x, y) : descending(x, y);
          });
          setFinSortState(!finSortState);
          setIsSortEmail(!isSortEmail);
          setUserInfoList(sortEmail);
          break;
        }
        case 'name': {
          const sortName = temp.sort((a, b) => {
            const x = a.userName.toLowerCase();
            const y = b.userName.toLowerCase();
            return !isSortName ? ascending(x, y) : descending(x, y);
          });
          setFinSortState(!finSortState);
          setIsSortName(!isSortName);
          setUserInfoList(sortName);
          break;
        }
        case 'createDate': {
          const sortDate = temp.sort((a, b) => {
            const x = parseInt(a.createDate.split('-').join(''), 10);
            const y = parseInt(b.createDate.split('-').join(''), 10);
            return !isSortDate ? ascending(x, y) : descending(x, y);
          });
          setFinSortState(!finSortState);
          setIsSortDate(!isSortDate);
          setUserInfoList(sortDate);
          break;
        }
      }
      return finSortState;
}

 

// orderBy 사용
import { orderBy } from 'lodash'

type OrderType = {
	name: string;
	direction: 'asc' | 'desc';
}

const handleClickSortBtn = (orderValue: OrderType) => {
	setUserInfoList(orderBy(userInfoList, [orderValue.name], [orderValue.direction]));
};

 

orderBy 함수의 정확한 사용법은 아래 공식 문서에서 확인하면 된다.

 

https://lodash.com/docs/4.17.15#orderBy

Lodash Documentation

 

---

export 

default로 선언한 함수를 다른 명칭으로 내보내는 방법을 알게 되었다. 

// Exam.jsx

const Exam = () => {
	return (
    <>
    	<div>하이루</div>
    </>
    )
}

export default Exam

// index.js
export {default as Example} from "./Exam"

// App.js

import {Example} from "@src/Exam"

const App = () => {
	return(
		<>
			<Example/>
		</>
	)
};

 

그외에 알아두면 좋을법한 내용들을 아래 블로그에서 잘 정리해주셨는데 참고하면 좋을 것 같다.

 

https://velog.io/@doondoony/JavaScript-Module-System#-es6-modulesesm

📦 JavaScript Module System