Styled Components

• Css-in-Js 방식의 패키지 (그 외 패키지 emoton, tailwindcss 등)
• Css-in-Js 방식이란? : 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸니는 방식

styled-components 준비

• (1) VScode 플러인 설치 : vscode-styled-components
• (2) yarn 에서 styled-components 설치하기

yarn andd styled-components

styled-components 사용하기

(1) 기본적인 사용법

• const StBox = styled.div``; 기본적으로 이처럼 작성한다.
  그리고 styled. 뒤에는 html의 태그**가 온다. 아래 처럼 내가 원하는 html 태그를 사용해서 styled-components를 만들 수 있다.

import styled from "styled-components"; 

const StBox = styled.div`
	width: 100px; 
	height: 100px; 
	border: 1px solid red; 
	margin: 20px; 
`;
const App = () => {
	return <StBox>박스</StBox>;}

(2) 조건부 스타일링

• styled-components도 말 그대로 컴포넌트다. 즉, 우리는 box들에게 prosp를 통해서 border color에 대한 정보를 전달해줄 수 있다.
• 정리
• CSS-in-JS란, 자바스크립트로 CSS코드를 작성하는 방식
• props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링을 할 수있다.