[styled-components] Extending Styles

 

 

  styled-components는 스타일을 확장하면 코드를 복제하지 않고도 한 컴포넌트의 스타일을 다른 컴포넌트에서 재사용할 수 있다. 이는 코드 중복을 줄이고 코드베이스의 유지 관리성을 향상시키는 데 도움이 된다.

  한 컴포넌트에서 다른 컴포넌트로 스타일을 확장하려면 스타일이 지정된 컴포넌트의 extend 메소드를 사용하면 된다. extend 메소드는 원래 컴포넌트와 동일한 스타일과 사용자가 추가적으로 제공하는 스타일을 사용하여 새 컴포넌트를 만든다. 

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  margin: 10px;
`

그런 다음 Button 컴포넌트를 확장하고 몇 가지 스타일을 추가한 채 PrimaryButton 컴포넌트를 만든다. 

const PrimaryButton = styled(Button)`
  background-color: green;
`

이 예에서 PrimaryButton 컴포넌트에서 Button 컴포넌트와 동일한 스타일이 있고 추가적으로 background-color 속성이 녹색으로 설정되었다.

function MyComponent() {
  return (
    <div>
      <Button>Default Button</Button>
      <PrimaryButton>Primary Button</PrimaryButton>
    </div>
  )
}

이 예제는 두 개의 버튼을 렌더링한다. 하나는 기본 파란색 배경색이고 다른 하나는 재정의된 녹색 배경색이다. 스타일을 확장하면 한 컴포넌트의 기존 스타일을 다른 컴포넌트에 재사용할 수 있으므로 코드 중복을 줄이고 코드 베이스의 유지 관리성을 향상시킬 수 있다.