React에서의 css inline 성능 이슈

react에서는 화면이 그려지느 ㄴ성능을 빠르게 하기 위해, 브라우저 Memory에 Tree 구조로 이루어진 Virtual DOM을 저장하고 있음.

 

Virtual DOM과 변경될 Virtual DOM을 비교하여 바뀐 최소 부분만을 실제 DOM 에 반영하여 렌더링 과정을 최소화한다.

 

css inline 방식을 사용한 경우

<Button style={{marginTop: 10}}

사용시 Virtual DOM 비교에서는 style이 기존 Virtual DOM과 다르다고 인식한다.

 

왜냐하면 JS에서 객체끼리의 비교는 false가 나오기 때문이다.

이와 비슷한 사항으로 Inline Function도 동일한 문제를 일으킬 수 있다.(useCallback을 이용하여 해결)