Styled Component

• JS파일 내에서 CSS를 사용할 수 있게 해주는 라이브러리

설치법

npm install --save styled-components

문법

const 컴포넌트명 = styled.태그명`
  margin: 5px;
  color: black;
`;

• props와 삼항연산자를 이용하여 조건부로 css속성을 줄 수 있다
• 확장형 스타일로 만들 수 있다

const 컴포넌트명 = styled.태그명`
  margin: 5px;
  color: black;
`;

const 확장할 컴포넌트명 = styled.(컴포넌트명)`
  width: 100px;
`;

• 전역 Nesting 스타일로 모든 컴포넌트를 스타일드 컴포넌트화 시키지 않아도 된다
• 이미지 태그에서 alt속성을 태그명뒤에, attrs({alt='글'})을 사용하면 컴포넌트를 사용하는 화면에서 작성을 안해도 된다.