React에서 Lodash(>=Underscore) 최대한 가볍게 추가하여 사용하기 (Lodash add to React as lightly as possible, shrinking its cherry-picked builds)

React
1

(구글링 + github 조금만 보시면 아실 수 있는 정보긴 하지만 정리 차원에서 작성해보니다.)

Lodash는 널리 알려진 자바스크립트 유틸리티 라이브러리죠.
Underscore와 유사하면서 더 가볍고 강력하다고 합니다.
http://lodash.com/

ES6를 사용하면 map, find, filter 등의 array functions가 제공되기 때문에 Lodash의 쓰임이 많이 줄긴 했습니다만.
여전이 array나 object 들을 지지고 볶고 할 때는 최고의 라이브러리 입니다.
scroll event와 같이 반복적 이벤트의 처리 성능 향상을 위한 throttle이나 debounce등은 아주 유용합니다.

…

서두가 길었는데요. React 프로젝트에 Lodash를 추가하기 위해서는 2가지 플러그인이 있습니다.
babel용 : https://github.com/lodash/babel-plugin-lodash
webpack용 : https://github.com/lodash/lodash-webpack-plugin

webpack을 사용한다면 꼭 둘다 적용하셔야 최소한의 bundle size로 사용하실 수 있어요.

그럼 해보죠.

  1. npm으로 프로젝트에 lodash를 더합니다.

    $ npm i --save lodash
    $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-es2015 webpack

  2. .bablrc 에 plugins 섹션에 es2015와 lodash를 추가합니다.

    {
    “presets”: [“react”, “es2015”],
    “plugins”: [
    …
    “lodash”
    ],
    …
    }

  3. webpack의 prod.config.js에 lodash-wepack-plugin을 추가합니다.

    var LodashModuleReplacementPlugin = require(‘lodash-webpack-plugin’);

    module.exports = {
    …
    plugins: [
    …
    // lodash
    new LodashModuleReplacementPlugin,
    …
    ]
    };

생각보다 간단하죠 :slight_smile:

…

사용은 이렇게 필요한 fuction만 추가해서 사용합니다.

import { union } from 'lodash';
import { throttle } from 'lodash';
...

handleScroll = throttle((event) => {
  ...
  const userIds = union([...], [...]);
  ...
}, 100);

window.addEventListener('scroll', this.handleScroll);

webpack으로 번들링 했을 때, 증가한 번들 사이즈는 1kb도 되지 않습니다.

오히려 필요한 기능을 직접 구현하려고 했으면 더 늘었을겁니다…

3개의 좋아요
2

lodash 전혀 안 보다가 혹시나 해서 봤더니 훨씬 전부터(3.0부터) string 관련 함수를 제공하는군요.
underscore를 그만 써야겠어요.ㅋㅋㅋ

둘이 합쳐진다고 봤던 것 같은데 아직도 아무 소식 없는 거 보면 물 건너간 걸까요?

1개의 좋아요