스타일드 컴포넌트(styled-components) 잘 활용하기

스타일드 컴포넌트에서는 컴포넌트를 상속 받아 추가 스타일을 붕여한 컴포넌트를 선언할 수 있다.

styled(컴포넌트)``

as 속성을 활용하면 스타일드 컴포넌트로 작성된 컴포넌트의 태그명을 교체하여 쓸 수 있다.

<컴포넌트명 as="태크명" />

스타일드 컴포넌트로 생성한 컴포넌트에는 attrs()메서드를 활용해 속성값을 부여할 수 있다.

const 컴포넌트명 = styled.태그명.attr({속성값})``

keyframes를 불러와 애니메이션 동작을 선언하고, 해당 값을 animation 속성 값으로 부여하여 재사용할 수 있다.

const rotateAnimation = keyframes`
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotatee(360deg);
  }
`;

const Box = styled.div`
  animation: ${rotateAnimation}; 1s linear infinite;
`;

&기호를 활용해 스타일드 컴포넌트의 가상 선택자를 활용할 수 있다.

const 컴포넌트명 = styled.태그명`
	&:가상선택자{
    	스타일코드
    }
`

스타일드 컴포넌트를 활용하면 컴포넌트 내부의 컴포넌트에 접근해 스타일을 부여할 수 있다.

const 컴포넌트명 = styled.태그명`
	${{
    	스타일코드
    }
`

ThemeProvider를 활용하여 객체에 적용된 스타일을 일괄적으로 관리할 수 있다.

<ThemeProvider theme={}>
	<App />
</ThemeProvider>