useSelector 사용시 주의사항 (thx to 석훈)

https://9oelm.github.io/2020-09-13--How-to-make-useSelector-not-a-disaster/

https://react.vlpt.us/redux/08-optimize-useSelector.html

※ 내용 간단 요약

useSelector를 사용할 때 Object 형태의 값을 확인하는 경우 내부 내용이 같더라도 매번 새로 객체를 생성하기 때문에 리렌더링이 강제로 이루어진다

그래서 최적화하기 위해서는 2가지 방법이 있음 (각각의 상태를 useSelector로 불러오거나, equility를 비교하는 별도의 함수를 두 번째 인자로 넣어줌)

// 각각의 상태를 따로따로 useSelector로 불러오는 예시
const { number, diff } = useSelector(state => ({
	number: state.counter.number,
	diff: state.counter.diff
}));

// react-redux에 내장되어있는 함수인 shallowEqual을 이용해서 {} 안의 값들을 비교 ({} 안에 또 {}가 있는 경우에는 사용 불가...)
const { number, diff } = useSelector(
	state => ({
		number: state.counter.number,
		diff: state.counter.diff
	}),
	shallowEqual
);