TIL noop bind-event-listener memoize-one popover component classnames

 

noop 

---

function noop(){}
const calculateSum = addFunction || noop;

 

 

아무것도 수행하지 않는 기본 함수.

만일 위의 예제에서 caculateSum에는 addFunction에 아무것도 있지 않는다면 noop을 수행하게 될 것이다. 

그런데 아래와 같이 쓸 수도 있다. 

 

const calculateSum = addFunction || () => undefined;

 

이렇게 써도 괜찮지만 유저에게 가독성을 높여주게 될 것이다. 

 

 

 

bind-event-listener

 npm package

---

1. removeEventListener를 호출하는것을 기억해야 한다. 

2. removeEventListener를 할 때 똑같은 리스너의 참조를 전달해야 하는데 까다로울 수 있다. 

3. 똑같은 capture value option을 전달해야 한다. 

 

 

bind-event-listener가 이걸 해결해 준다. 

1. 이벤트를 바인드 했을 때 단순한 unbind함수를 돌려받는다. 

2. unbind함수는 같은 리스너 참조값을 removeEventListener에 전달하길 보장한다. 

3. unbind함수는 보장한다. capture값이 addEventListener가 removeEventListener와 함께 사용 되든지 안되든지 보장된다. 

 

 

 

memoize-one

npm package

---

가장 최근 인수와 결괏값만 기억함. 

maxAge와 maxSize와같은 캐시 busting 매커니즘은 메모리릭이 되기 쉽다.

함수와 함께 사용하면 메모이즈 함수는 마지막 인수를 기억하고, 다음에 같은 인수로 불려지면 이전의 결괏값을 반환함

 

함수를 인수로 넣는 함수도 메모이즈 할 수 있음

로대쉬의 isequal을 사용

 

메모이제이션 캐시를 비울 수 있음

 

 

 

popover component만들기 

---

 

https://zlrlo.github.io/editor-popover/

 

동적 팝오버를 생성 할때. 

https://www.youtube.com/watch?v=H_sda770AjU

 

z-index를 설정하면 위에서 렌더링이 되지만, 

해당 부모 컴포넌트의 아래에 위치한 팝오버 드롭다운 메뉴는

화면에 묻혀 보이게 된다.  

그럴경우 portal을 활용해 document.body에 바로 그려줌 createPortal

 

그렇게 되면 위치값을 잃어버리게 되고 만다.  

그럴때 사용하는 것이 react Popper.

 

 

 

classnames 

---

 

classNames는 다양한 arguments와 string, object를 받을 수 있다. 

key가 falsy한 값이면 아웃풋에 담기지 않음 

 

classNames({ foo: true }, { bar: true }); // => 'foo bar'

 

 

 

Arrays will be recursively flattened as per the rules above:

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

 

 

Dynamic class names with ES2015

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });

 

 

 

var btnClass = classNames('btn', this.props.className, {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

 

Alternate dedupe version

 

var classNames = require('classnames/dedupe');

classNames('foo', 'foo', 'bar'); // => 'foo bar'
classNames('foo', { foo: false, bar: true }); // => 'bar'

 

 

Alternate bind version

var classNames = require('classnames/bind');

var styles = {
  foo: 'abc',
  bar: 'def',
  baz: 'xyz'
};

var cx = classNames.bind(styles);

var className = cx('foo', ['bar'], { baz: true });