React 인라인 스타일의 단점

style을 적용할 때 인라인 스타일을 이용할 때가 많았다 (편하니까)

<div style={{ width:100px }}>
	<h1>자바스크립트</h1>      
</div>

이런식으로..

하지만 인라인식으로 작성하게 되면 불필요한 리랜더링을 하게 된다. 이유는?
결론부터 말하면 {} === {} 가 false 이기 때문!
리액트의 버추얼돔이 검사를 하면서 어디가 달라졌는지 찾다가
이전 값과 비교했을때 다른 객체로 인식하기 때문에 리랜더링을 하게된다.
=> 규모가 큰 웹이나 앱이면 성능이 느려짐.

개선방법

• useMemo 사용하기

  • const style = useMemo(() => ({ width: 100px }), []);

• styled-components 사용하기

  • const CustomDiv = styled.div`width:100px`; 

위의 방법을 통해 리랜더링 문제를 최적화 할 수 있다~