Inline Styling에 대한 이야기

marginTop 속성을 InlineStyling으로 주었다.

개발 시 생산성 향샹을 위해 우리는 inline styling을 자주 이용한다.

하지만 React에서는 이 Inline Styling은 성능의 악화를 초래하는 문제가 된다.

 

이유는 Rerender Issue를 초래하기 때문인데,

이렇게 InlineStyling으로 새로운 객체를 생성하면,

리액트는 리랜더를 실행할때, Swallow Compare (주소값을 비교)를

이용하여 리랜더 여부를 정하는데, 새로운 객체는 이 Shwaallow Compare에서

Equality가 Negative하기 때문에 다시 Rerender를 초래한다.

 

이에 대한 해결책으로는 Styled Component를 이용하여,

컴포넌트를 만들어서 styling을 해주는 방법과

styled div 를 만들어서 대체해준다.

useMemo를 이용하여 스타일 값을 주는 것

useMemo로 marginTop style을 생성하여 준다.

두가지가 아는 선에서는 최선인 것 같다.

 

이런 사소한 문제를 신경쓰는게 최적화의 한걸음 아닐까?