TIL - Styled Components

• Styled Components에서는 스타일 재사용이 필요한 상황에서 클래스가 아니라 JavaScript 변수를 만든다.

• CSS는 재사용되는 코드를 관리하기 어렵지만 Styled Components는 쉽다.

---

📌 styled 불러오기

import styled from "styled-components";

• Styled Components에서는 클래스 대신에 컴포넌트를 만든다.
  
  

📌 가장 기본적인 컴포넌트 만드는 방식

const Button = styled.button`
	background-color: #6750a4;
	border: none;
	color: #ffffff;
	padding: 16px;
`;

• styled.tagname의 tagname 부분에는 스타일을 적용한 HTML 태그 이름을 쓴다.
  그리고 바로 뒤에, 템플릿 리터럴 문법(백틱``)으로 css코드를 적는다.
  
  

📌 컴포넌트 사용하기

<Button>Hello Styled!</Button>

• styled.tagname으로 만든 컴포넌트는 일반적인 React 컴포넌트처럼 JSX로 사용하면 된다.