Emotion CSS styling 복잡성을 줄이는 방법

생성일

Dec 11, 2021 08:01 AM

태그

Emotion

작성자

해결 완료

🔥 문제

Emotion에서 스타일링을 하려다 보니, 복잡성이 너무 커지고, 유지보수하기가 점차 힘들어졌다.

이를 효과적으로 개선하는 방법은 무엇일까?

⭐ 해결 방법

해결 방법은, 어떤 특정한 prop의 변화가 독립적이라면,

이를 별도의 css로 분리를 시키고

위 → 아래에서 순서대로 css를 적용시킨다는 원리를 이용, 스타일링에 있어서 순서대로 하도록 하는 것이다.

결과적으로 css의 각 제어 방식은 스코프로 독립되어 있기에 나중에 해당 prop을 제거할 때 용이하고, 해당 로직의 순서를 제어하기 쉬워지므로 유지보수성이 높아진다.

실제 코드는 다음과 같이 개선할 수 있다.


const StyledNoneTypeButton = styled.button<CustomButtonProps>`
  ${({
    bgColor,
    width,
    height,
    margin,
    padding,
    fontSize,
    fontColor,
    border,
  }) => css`
    width: ${typeof width === 'string' ? width : `${width}px`};
    height: ${typeof height === 'string' ? height : `${height}px`};
    padding: ${typeof padding === 'string' ? padding : `${padding}px`};
    margin: ${typeof margin === 'string' ? margin : `${margin}px`};
    font-size: ${typeof fontSize === 'string' ? fontSize : `${fontSize}px`};
    color: ${fontColor};
    background-color: ${bgColor};
    border: ${border || 'none'};
  `}
  ${({ isCenter }) =>
    isCenter &&
    css`
      display: flex;
      align-items: center;
      justify-content: center;
    `}

  ${({ visible }) =>
    !visible &&
    css`
      display: none;
    `}
`;

단순히 받는 css prop은 한 번에 계산하되, 해당 로직에서 복잡성을 증가시키는 css prop의 경우 별도로 중요도에 따라 아래로 배치시키면 로직 제어에 효과적이다!

💡

버튼 컴포넌트를 새로 만드려다, 티모와 함께 css prop을 쓰기로 타협한 건 안비밀...ㅎㅎ... 넘 아까워서, 내가 작성 중에 터득한 스킬을 글로 남겨놓았다.

👏🏻 참고자료

Jason의 뇌피셜.