styled-component의 css를 이용하여 코드가독성 높이기!

아래의 디자인처럼 모든 input의 스타일은 같으니 똑같은 컴포넌트로 재사용하되, 제목이나 소개처럼 Label 부분 옆에 필수로 입력해야할 데이터에는 * 표기를 하기로 했다.

 

디자인 예시

 

물론 의미없는 요소이니 before 가상선택자를 사용하기로 했고, props로 important라는 속성을 넘겨주면 *을 렌더링 하기로 했다.

(생략)
return (
    <div>
      <Label important={important && important}>{label}</Label>
    </div>
  );

 

근데, 여기서 css스타일링이 문제였다. 기존 props으로 넘겼을 때, 내가 알고있는 방법은 아래처럼 하나의 조건으로 JSX로 몽땅 넘겨버리는 방법이였다. 이렇게 되었을때, 코드의 가독성을 해치고, 오류가 생기기 쉽다고 생각했다.

const Label = styled.span`
  display: inline-block;
  color: #878787;
  font-size: 18px;
  position: relative;
  ::before {
    ${({ important }) =>
      important && `position : absolute; content: '*'; right: -10px; top: 0; color: #ff7775; font-size:18px;`}
  }
`;

 

 

CSS 를 사용하면 이렇게 깔끔해집니다.

import styled, {css} from 'styled-components';

(생략) 

const Label = styled.span`
  display: inline-block;
  color: #878787;
  font-size: 18px;
  position: relative;
  ::before {
    ${({ important }) => important && importantStyle}
  }
`;

const importantStyle = css({
  position: "absolute",
  content: "'*'",
  right: -10,
  top: 0,
  color: "#FF7775",
  fontSize: "18px"
});

한눈에 알아보기 좋고, 깔끔해졌다. content에서는 string을 사용해야되는데 저렇게 string을 두번 감아줘야 정상적으로 동작한다. 조건부로 넘겨줘야할 css코드가 많다면 위와 같은 방식으로 넘겨주면 좋을 것 같다.