Lodash

lodash란?

lodash는 자바스크립트 유틸리티 라이브러리로써 array, collection, date, number, object 등이 있으며, 데이터를 쉽게 다룰 수 있도록 도와준다. (예를들면, 배열 안에 중복 값을 제거하기 / object 배열 안에 특정 값만 추출하기 등..)
특히, 자바스크립트에서 배열 안의 객체들의 값을 핸들링할때 유용하다.

lodash 사용법

_.fill()

특정한 값으로 배열을 채울 때 사용한다.

_.fill(Array(3), true)
// [true, true, true]

_.pluck()

객체로 구성된 배열에서 객체의 특정 키에대한 값을 추출할 때 사용한다.

let users = [{
  id: 1,
  name: 'Chris'
}, {
  id: 2,
  name: 'Mike'
}, {
  id: 3,
  name: 'Sam'
}];

_.pluck(users, 'id');
// [1, 2, 3]

_.every()

배열을 순회하면서 각 요소에 대한 검증함수를 수행한다. 그리고 모든 결과가 true를 반환할 때 동작하는 함수이다.

it('should filtered by gift id', function (done) {
  request(app)
      .get('/api/giftTakings?GiftId=1')
      .end(function (err, res) {
        if (err) throw err;

        _.every(res.body, function (giftTaking) {
          return giftTaking.GiftId === 1;
        }).should.be.true;
        done();
      });
    });

.omit() 과 .remove()

포함된 아이템을 삭제한다는 점에서는 비슷한 역할을 하는 함수지만 용도가 다르다. _.omit()은 객체를 대상으로 하여 특정 키나 값을 제거하는 함수다. 그 결과 기존 객체에서 새로운 객체를 생성하여 반환한다. REST API에서 리소스 모델을 json으로 받아서 처리할 때 사용했다.

function update(req, res) {
  let value = _.omit(req.body, _.isUndefined);
  if (_.isEmpty(value)) {
    return res.status(400).json({error: 'parameter is empty'});
  }

  // value 객체를 이용하여 모델 업데이트
  // ...
}

_.remove()는 배열을 대상으로 그 삭제 기능을 하고 결과 삭제된 아이템을 배열로 반환한다. 말이 좀 애매한데 예제를 보면 쉽게 이해할 수 있다. (아래 코드는 lodash 문서 예제와 동일하다)

let array = [1, 2, 3, 4];
let evens = _.remove(array, function(n) {
  return n % 2 == 0;
});

console.log(array);
// → [1, 3]

console.log(evens);
// → [2, 4]

debounce

특정 이벤트가 발생할때 작동하는 비즈니스 로직이 과도하게 발생하는 것을 방지하기위해 사용되는 함수이다.
input box에서 검색어를 입력할때마다 서버에서 연관된 검색어 정보를 가져와 보여주는 기능을 구현할때 주로 사용한다.
마지막 이벤트가 호출된 이후에 일정시간이 지난 후에 함수를 지연호출 시키는 역할을 한다.

import React from "react";
import "./App.css";
import { debounce } from "lodash";

const somthingFunc = () => {
  console.log("called somthingFunc");
};

const debounceSomethingFunc = debounce(() => {
  console.log("called debounceSomethingFunc");
}, 200);

function App() {
  const [text, setText] = React.useState("");
  const [text2, setText2] = React.useState("");

  const onChange = event => {
    const value = event.target.value;

    setText(value);
    somthingFunc();
  };

  const onDebounceChange = event => {
    const value = event.target.value;

    setText2(value);
    debounceSomethingFunc();
  };

  return (
    < div className="App">
      < div>
        < label>
          < span style={{ marginRight: 16 }}>텍스트1< /span>
          < input type="text" value={text} onChange={onChange} />
        < /label>
      < /div>
      < div>
        < label>
          < span style={{ marginRight: 16 }}>텍스트2< /span>
          < input type="text" value={text2} onChange={onDebounceChange} />
        < /label>
      < /div>
      < div style={{ marginTop: 16 }}>console을 확인해주세요.< /div>
    < /div>
  );
}

export default App;