[React] 자주 변경되는 컴포넌트 최적화: style

이 컴포넌트 스타일을

이 패널을 사용해 커스텀 하는 기능을 개발 하던 중

Over 200 classes were generated for component ColorPicker__ColorBox with the id of "ColorPicker__ColorBox-sc-189ed6b7-1".

이런 경고가 나왔고 아래 방식으로 styled component를 사용할 것을 권장한다고 했다.

Consider using the attrs method, together with a style object for frequently changed styles.

Example:
  const Component = styled.div.attrs(props => ({
    style: {
      background: props.background,
    },
  }))`width: 100%;`

결론

아래와 같은 코드를

export const GoalValueLabel = styled.span<{ color: string }>`
    color: ${props.color};
`;

이렇게 변경해주면 color prop이 변경될 때마다 새로운 class가 생성되는 것을 막을 수 있다.

export const GoalValueLabel = styled.span.attrs<{ color: string }>((props) => {
  return {
    style: {
      color: props.color,
    },
  };
})``;

문제

위 그림에 나오는 show more 부분에 새로운 class가 계속 추가되는 문제

원인

styled component에 props으로 넘겨주는 color가 color-picker에서 계속 업데이트 되면서 새 color마다 새로운 class로 된 style이 계속 추가

해결

styled component attrs를 사용해 dom에 직접 in-line으로 style.color 속성을 주입할 수 있다. 이렇게 컴포넌트에 자주 변경되는 스타일(이 경우 배경 색상)을 styled.dom.attrs 사용해 내분에서 style을 직접 설정해주면 styled component가 여러 CSS 클래스 생성하지 않고 원하는 스타일을 제어할 수 있음

styled-components attrs()에 대하여