210712 styled-components

styled-components를 이용한 class없는 CSS스타일링

컴포넌트가 많은 경우 스타일링을 하다보면

• 실수로 클래스를 중복으로 만들어놓기도 하고
• 컴포넌트에 원하지 않는 스타일이 적용되거나
• css 파일이 너무 길어져서 수정이 어렵거나
  하는 경우들이 있기 마련이다.

그래서 탄생한 클래스 선언 없이 컴포넌트에 css를 직접 장착하는 방법!
styled-components 이용하기

npm install styed-components 혹은
yarn add styled-components로 설치

import styled from 'styled-components';

padding이 20px인 div를 만들어보자.
let으로 선언하지만 컴포넌트와 상당히 유사하다고 생각하면 된다.

let 박스 = styled.div`   
  padding: 20px;
`;

이렇게 박스 div를 만들었으면, 컴포넌트 쓰듯이 써주면 된다

<박스>
 어쩌구저쩌구
</박스>

다음으로 font-size가 25px인 h4를 만들어 본다면

let 제목 = styled.h4`
  font-size: 25px;
 `;

만약 여기 제목 요소가 여러가지 색깔 버전으로 필요하다면?
props를 사용해서 다양한 스타일을 적용해보자.

let 제목 = styled.h4`
  font-size: 25px;
  color: ${ props => props.색상}
 `;

${}는 문자를 생성하는 ``(백틱기호)안에서 쓸 수 있는 문법으로, 문자 중간중간에 함수나 변수를 집엉넣고 싶을 때 사용한다.

<박스>
 <제목 색상={'red'}>상세페이지</제목>
 <제목 색상="blue">상세페이지</제목>
</박스>

이렇게 props에 blue와 red를 전달해주면 각각 blue, red가 들어가 컴포넌트가 생성된다.

styled-component 라이브러리는 호불호가 갈리지만(사실 나도 이걸 왜 써야 하는지 잘.. 그냥 css열심히 짤듯) 컴포넌트가 많아지면 클래스가 겹칠 일이 줄어든다는 큰 장점이 있음.