react 에서 inline style 의 단점

직접 carousel 만들던 중 콘텐츠를 움직이기 위해 태그의 inline style left 속성을 변경하는 방법을 사용했었는데 리팩토링 하고자 자세히보니 불필요한 리랜더링이 있었고

찾아보니 react 에서 inline style 을 사용시 같은 값이더라도 리랜더링이 일어나 사용하지 않는 것이 좋고 styled-component 등을 활용하는게 좋다고 한다

3 줄 정리

• 간단하게 react 는 새로운 document와 기존 document 구조를 대조해서 리랜더링 여부를 판단 후 변경한다.

• js 세상은 {} !== {} 이 성립하며 inline style 은 객체형식이다

• inline style 을 적용시키는 코드가 있다면 어떤식이든 리랜더링이 될 것이고 무의미하거나 불필요한 리랜더링일 가능성이 높으니 고로 쓰지말자