[React] styled-components

styled-component는 말 그대로 style이 적용된 컴포넌트를 말합니다.

컴포넌트이기 때문에 styled-component로 생성되는 변수들의 첫 문자는 무조건 대문자여야 합니다.

 

styled-components 설치하기

npm i styled-components

 

styled-component를 생성하는 방식은 아주 간단합니다.

const Style = styled.div`
  color : #333;
  padding : 20px;
  backgound : #fafafa;
`

return (
  <Style>styled-component 사용하기</Style>
)

또한 component이기 때문에 props를 이용하여 내가 props로 정보를 넘겨주면 같은 style이라도 수치를 다르게 설정할 수 있습니다.

interface iStyleDivProps {
  bg : string;
  fontColor : string;
  pd : number;
}
const StyleDiv = styled.div<iStyleDivProps>`
  backgound : ${(props) = > props.bg};
  color : ${(props) => props.fontColor};
  padding : ${(props)=>props.pd}px; 
`

return(
  <StyleDiv bg={"#f1f1f1"} fontColor={"#333"} pd={20}></StyleDiv>
)

 

그렇다면 왜 styled component를 사용하는 걸까요?

인라인태그로 들어가기 때문에 페이지 로딩시간이 단축된다, 작성된 컴포넌트 안에서 사용할 수 있기 때문에 css 파일과 다른 component의 className가 중첩하는지 신경 쓰지 않아서 좋다는 장점이 있습니다.

 

styled-component에 대한 생각

개인적으로 styled-component가 불편하다 생각했습니다.

예를 들어서 똑같은 style의 태그가 존재한다 했을 때 styled 컴포넌트를 이용하면 사용하는데 불편하지는 않을 것 같은데 수치가 제각각인 경우에는 styled-component는 사용하는 데 있어서 적절하지 않다 생각했습니다.

서로 다른 수치를 가질 수 있는 예시가 바로 padding과 margin이라 생각했습니다. 왜냐하면 padding과 margin 같은 경우에는 10px (상하좌우), 10px 20px(상하, 좌우), 10px 20px 5px (좌, 상하, 우), 5px 10px 15px 20px(좌, 상, 우, 하) 같이 제각각 사용이 가능하기 때문입니다. 저 하나 때문에 styled component를 여러 개 생성하여 해당 조건에 맞는 똑같은 style component에 저 상하좌우만 다르게 입력받는 건 좋은 코드라 생각하지 못하기 때문입니다. 

 

유지보수면에서도 styled-component가 좋다 하는데 제 생각으로는 직접 코드를 짠 사람이 아닌 이상 해당 component를 찾는 거랑 기존 css 행을 찾는 거랑 비슷하다고 생각했습니다.