react) inline style 단점

 

 

react 는 jsx 문법을 사용한다. 

jsx 는 react.createElement 를 통하여 변환이 되고

모든 속성이 props 객체의 부분이 된다

 

 

 

 

 

inline style

 

<div style={{width: "100px", color:"red"}}/>

 

카멜케이스로 작성한다.

 

inline style의 단점으론

 

html 파일 사이즈를 크게 만들어 화면에 웹페이지가 로딩 되는 시간이 따로 걸리고

html, css 코드가 섞이게 되어 유지 보수가 힘들기도 하다(가독성)

 

하지만 가장 큰 단점은

 

inline style에서 사용한 {}는 이전 값과 비교했을 때

다른 객체로 인식하기 때문에 (참조하는 주소값이 달라짐) 리렌더링을 일으키게 되는 것이다.

 

그러니까 한번 돔을 만들어 놓고 또다시 돔을 그린다 => 비효율적

 

 

이를 memo를 통하여 메모이제이션 한다는 해결방안도 있지만

css-in-js 를 사용하는 방법도 있다.