INDEX

  1. styled-components 사용법
  2. props 이용하면 컴포넌트 재활용 가능하댔음
  3. 물론 장점만 있는게 아님

  1. styled-components 사용법

    npm install styled-components
    
    import styled from 'styled-components';
    
  2. 물론 장점만 있는게 아님

    1. 장점
      • CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있습니다.
      • 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다. 원래 그냥 CSS파일은 오염됩니다.
      • 페이지 로딩시간 단축됩니다
    2. 단점
      • JS 파일이 매우 복잡해집니다.
      • 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어렵습니다.
      • JS 파일 간 중복 디자인이 많이 필요하면 어쩌죠? 다른 파일에서 스타일 넣은 것들 import 해와서 쓰면 됩니다. 근데 그럼 CSS파일 쓰는거랑 차이가 없을 수도요
      • CSS 담당하는 디자이너가 있다면 협업시 불편할텐데 그 사람이 styled-components 문법을 모른다면 그 사람이 CSS로 짠걸 styled-components 문법으로 다시 바꾸거나 그런 작업이 필요하겠군요. 그래서 신기술같은거 도입시엔 언제나 미래를 생각해보아야합니다.