[TypeScript]나만 보는 TypeScript 기초 메모장(Styled-components 기본)

장점

• 동적 스타일링 : props를 이용해 컴포넌트 스타일을 동적으로 바꿀 수 있음.
• 컴포넌트 단위 스타일 : CSS가 컴포넌트 내에서 바로 정의되기 때문에, 스타일과 컴포넌트가 더 잘 결합, 유지보수하기 쉬움.
• 자동으로 클래스 이름 해시화 : 클래스 이름이 자동으로 고유하게 변환되기 때문에, 전역 스타일 충돌을 걱정할 필요가 없음.

예시:

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

 

• <Button primary>Primary Button</Button> primary prop을 주어서 파란색 배경의 버튼이 생성
• <Button>Secondary Button</Button> primary prop을 주지 않으면, 기본값으로 회색 배경의 버튼이 생성

 

props를 이용해서 동적으로 스타일을 조정할 수 있다는 점에서 스타일을 코드처럼 다룰 수 있다는 점이 큰 장점.