귀찮음을 감수해라 inline-style

inline-style, 왜 쓰면 안될까?

프로젝트에서 styled-components를 사용해서 css 디자인을 했었다. css 속성 하나만을 바꿀 때 나는 줄곧 "굳이 또 하나의 컴포넌트를 만들어야할까? 귀찮으니 inline으로 줘버리자!" 라고 생각해왔다. inline-style을 지양해야 한다는 말은 줄곧 들었지만 이유를 몰라서 뭐 얼마나 안좋겠어? 라는 안일한 생각을 했던 나였다.

<button style={{ marginTop: 10 }}></button>

이런 경우도 있고, styled-components로 만든 공통으로 쓰이는 component의 하나의 속성을 바꾸는 경우도 있다.

const ButtonWrapper = styled.div`
  margin-top: 10px;
`;

<ButtonWrapper style={{ color: "red" }}></ButtonWrapper>

하지만 javascript에서 {} === {} // false 이다. 따라서 바뀐 점이 없더라도 새로운 객체가 생성되기 때문에 재랜더링이 일어나게 된다. 즉, 불필요한 재랜더링인거다. 그러면 성능상 매우 안좋기 때문에 지양해야한다.

이것 말고도 코드의 재사용성이 떨어지고, 미디어 쿼리, 애니메이션 같은 CSS의 기능을 온전하게 활용할 수 없다는 점 등이 있다.

그럼 어떻게 해야할까?

styled-component를 사용하는 경우는 props로 넘겨주는 방법을 활용하면 된다.
방법은 여기를 참고하길 바란다.

styled-component가 싫다면 useMemo를 활용하면 된다.

const style = useMemo(() => ({ marginTop: 10 }), []);

<ButtonWrapper style={style}></ButtonWrapper>