React StyledComponents / 리액트, css, style, 기능

React StyledComponents

---

https://styled-components.com/

styled-components

React로 개발할 일이 있으면 무조건 사용하게 되는 styled-components

사용처 목록

그냥 알만한 기업에서는 다 쓰는 것으로 보인다.

airbnb, tinder, riot, lego...

사실 사용하면서 단점을 느낀적은 없는 듯

내가 주로 사용하는 기능으로는 

• 기본제공 component에 css를 적용하여 StyledComponent 생성하여 사용 가능
• StyledComponent로 props를 보내고 받아서 StyledComponent내부 로직을 통해 조건부 css 적용 가능
• StyledComponent를 생성 후 새로운 StyledComponent로 wrapping해서 사용 가능
• Nested style로 hover과 같은 StyledComponent내부에서 css 적용 가능

const StyledComponent = styled.div`
#조건부 css적용 가능 active변수가 존재한다면 yellow 색 적용
  ${({ active }) => active && `
    color: yellow;
  `} 

#컴포넌트에 hover와 같은 action에 css 적용 가능
  &:hover{
    background-color: blue;
    color: green;
  } 
`

const WrappingStyledComponent = styled(StyledComponent)`
#앞선 StyledComponent를 wrapping하여 새로운 컴포넌트 생성 가능
  color: red;
`

이런식으로 StyleComponent와 WrappingStyledComponent를 만들 수 있음

<StyledComponent active={true}>
    styledcomponent test
</StyledComponent>
<WrappingStyledComponent>
    red
</WrappingStyledComponent>

저렇게 Component를 생성한 뒤 바로 이렇게 이용할 수 있음

active와 같이 props를 StyledComponent로 전달하여 사용 가능

단일 변수가 아닌 객체props도 처리 가능

selectors등 다양한 기능 사용 가능하도록 점차 확장 중

Typescript도 지원

 

앞으로 지속적으로 사용할 예정인데, 현재 내가 사용하고 있는 기능만 익숙해져도 css에서 따로 애먹었던 기억은 없다.

기능도 계속 추가되고 있어 사용하며 꾸준히 학습해야겠다.