ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 221102 TIL(Attrs)
    하루 30분 TIL 2022. 11. 2. 00:58

    1. Styled-Components Attrs

    required의 property를 가지는 input 컴포넌트를 아래와 같이 여러개 쓴다고 가정하자

    <Input required />	
    <Input required />	
    <Input required />
    

    똑같은 props를 매번 써주기 귀찮다. 이럴 때 쓰는 것이 attrs

    const Input = styled.input.attrs({ required: true })`
    
    background-color:red
    
    `
    
    즉, html tag가 갖고있는 고유의 attribute를 넣어 재사용하기 위한 컴포넌트를 만들 때 attrs()를 사용하면 유용하다
    • Use styled components for static styles and dynamic styles that don't change very often;
    • Use inline styles (through .attrs) for styles that change frequently, like for animations.

    attrs를 사용하면 그냥 props로 사용하는 것과 달리 인라인 스타일로 적용이 된다. 

    애니메이션과 같이 스타일이 자주 바뀔 때 사용하면 좋다고 한다! 

    '하루 30분 TIL' 카테고리의 다른 글

    221208 TIL(uncontrolled vs controlled)  (0) 2022.12.09
    221103 TIL  (0) 2022.11.04
    221025 TIL  (0) 2022.10.26
    TIL 221013(catch문에서 타입 unknown )  (0) 2022.10.14
    220921 TIL  (0) 2022.09.21

    댓글

Designed by Tistory.