front-mockup(1)Styled Component

기간

2021/11/4 ~ 2021/11/9

메일작성 페이지

• <CKEditor />
• <Select />
• <Datepicker />
• Styled Component
• Node-schedule || cron
• <Modal />

Styled Component

//Adapting based on props
const Button = styled.button`
background: ${props => props.primary? "palevioletred" : "white"};
color: ${props => props.primary? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
render(
  <div>
      <Button>Normal</Button>
      <Button primary>Primary</Button>
  </div>
)

const StyledButton = styled.button`
  background: ${(props) => (props.send ? "palevioletred" : "white")};
  color: ${(props) => (props.send ? "white" : "palevioletred")};
  float: ${(props) => (props.send ? "right" : "left")};
  &:hover {cursor: pointer}; //hover되었을때 cursor 변경시키기
  font-size: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
render(
  <div>
      <StyledButton>Normal</StyledButton>
  </div>
)

//extending styles
const Button = styled.button`
color:palevioletred;
font-size:1em;
margin:1em;
padding:0.25em 1em;
border:2px solid palevioletred;
border-radius:3px;
`;

const TomatoButton = styled(Button)`
color:tomato;
border-color:tomato;
`;
render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

reference

• https://styled-components.com/docs/basics#installation

styled component를 사용해보니 다음과 같은 장단점이 있었다.

• 장점

  • 프롭스를 전달해 조건에 따라 같은 컴포넌트를 재사용하더라도 다른 css를 적용할 수 있다.
  • 클래스 이름을 고민하지 않아도 된다.
  • 추가적인 클래스를 적용할때에는 다른 태그에 쓰는 것과 마찬가지로 className=""로 추가할 수 있다.
  • react-router-dom에서 제공하는 등 새롭게 만든 컴포넌트 뿐만 아니라 이미 존재하는 컴포넌트도 스타일링할 수 있다.

• 단점

  • 아직 익숙하지 않아서인지 styled component안에 다른 자식 컴포넌트를 넣었을때, 부모 컴포넌트에 적용한 display:flex 속성에 따라 자식 컴포넌트에 flex:1 1 auto가 적용되지 않았다. 그래서, 상위에 <div> 태그로 다시 감싸주고, 이 div에 display:flex 속성을 주어야했다.
  • 공식문서에 따르면 몇몇 제약사항들이 있는데, 그 중 하나는 styled component에 인라인 스타일링을 권장하지 않는다는 것이다. 그 이유는 의사 및 미디어쿼리를 사용할 수 없고, 뿐만 아니라 브라우저 호환성, camel-casing 등에 대한 우려가 있기 때문이다. 이런 제약사항에 대해 잘 알지 못한다면 나중에 문제를 겪을 수 있을 것 같다.

• 꼭!

  • render 메소드 밖에 styled component를 정의해야한다.