[React] Styled Components

1️⃣ Styled Components란?

• 현대 웹 앱이 컴포넌트 기반으로 성숙해가면서 CSS 스타일링 방법론 또한 컴포넌트를 기반으로 재구성되고 있다. 이러한 고민 속에서 등장한 패러다임이 CSS-in-JS이면서 가장 인기 있는 라이브러리가 Styled Components이다.

2️⃣ Sass 보다 Styled Components가 인기 있는 이유

• 자동 중요 CSS
  스타일 구성 요소는 페이지에 렌더링되는 구성 요소를 추적하고 스타일을 완전히 자동으로 삽입한다. 이는 코드 분할과 결합되어 사용자가 필요한 최소한의 코드를 로드한다는 것을 의미한다.
  
  
• 클래스 이름 버그 X
  styled-components는 스타일에 대한 고유 한 클래스 이름을 생성한다. 중복, 겹침 또는 철자 오류에 대해 걱정할 필요가 없다.
  
  
• 보다 쉬운 CSS 삭제
  클래스 이름이 코드베이스 어딘가에 사용되는지 여부를 알기가 어려울 수 있다. 스타일 구성 요소는 모든 스타일이 특정 구성 요소에 연결되어 있기 때문에 명확하다. 구성 요소가 사용되지 않고 (도구가 감지 할 수 있음) 삭제되면 모든 스타일도 함께 삭제된다.
  
  
• 단순 동적 스타일링
  여러 개의 클래스를 수동으로 관리 할 필요없이 소품 또는 글로벌 테마를 기반으로 구성 요소의 스타일을 조정하는 것이 간단하고 직관적이다.
  
  
• 간편한 유지 관리
  구성 요소에 영향을 미치는 스타일을 찾기 위해 다른 파일을 검색 할 필요가 없다.
  
  

3️⃣ 간단한 적용 예시

render(
  <Wrapper>
    <Title>
        Hello!
    </Title>
  </Wrapper>
);

const title = styled.h1`
 font-size: 15px;
 text-align: center;
 color: white;
`;

const Wrapper = styled.section`
 padding : 10px;
 background: black;
`;

• 스타일 구성 요소 태그된 템플릿 리터럴을 활용하여 구성 요소의 스타일링을 지정한다!

4️⃣ Props를 이용한 예시

 const Button = styled.button`
  background: ${props => props.primary ? "black" : "white"};
  color : ${props => props.primary ? "white" : "black"};

  font-size: 1em;
  margin: 1em;
  padding 0.25em 1em;
  border: 1px solid grey;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
)
 

• 스타일이 지정된 구성 요소의 템플릿 리터럴에 함수를 전달하여 props를 기반으로 조정할 수 있다.
• 버튼 구성 요소에는 색상을 변경하는 기본 상태가 있고, props를 true로 설정하면 배경과 텍스트 색상이 바뀐다.

5️⃣ 스타일 확장

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

• 다른 스타일링을 상속하는 새 구성 요소를 쉽게 만들려면 위에 예시와 같이 styled(변수)를 적용해주면 된다.