React: Styled-Component 💅🏻

Styled-Component설치

npm i styled-components

Styled-Component의 기본적 사용법

import styled from 'styled-components';

const Box = styled.div`
	background-color: teal;
	width: 100px;
	height: 100px;
`;
const TwoBox = styled.div`
	background-color: teal;
	width: 100px;
	height: 100px;
`;

function Basic(){
	return(
		<Box />
	);
}

---

Styled-Component의 Adapting

const TwoBox=styled.div`
	background-color: ${(props) => props.bgColor};
	width: 100px;
	height: 100px;
`;

function Basic(){
	return (
		<Box>
			<TwoBox bgColor="yellow"/>
			<TwoBox bgColor="black"/>
		</Box>	
	);
}

이렇게 하면 background-color을 props로 보내서 처리하게 되므로, 컴포넌트가 prop에 의해 변경 가능하게 만들어진 것이다.

Styled-Component의 Extending

const Circle=styled(TwoBox)`
	border-radius: 50px;
`;

Circle은 TwoBox의 모든 속성을 받아오고, 거기에 border-radius를 추가해준다.

---

Styled-Component의 As사용법

다수의 컴포넌트를 다룰 때 도움이 될만한 몇 가지 트릭

const Btn = styled.button`
	color: white;
	border: 0;
	border-radius: 15px;
	background-color: tomato;

function Basic(){
	return(
		<Btn as="a" href="/">Log In</Btn>
	)
}

다음과 같이 입력하면 button이 아닌 a태그로 바뀐다.

---

Styled-Component의 Attribute

const Input = styled.input.attrs({required: true, minLength: 10})`
	background-color: dodgerblue;
`;
function Basic(){
	return(
		<Input />
		<Input />
		<Input />
	);
}

이 코드를 실행하고, 개발자 도구를 통해서 본다면 저 3가지 Input에 모두 required, minLength 가 들어가있다.

---

Styled-Component의 Animation-Ch01

import styled, {keyframes} from "styled-components";

const rotateAnimation = keyframes`
	0%{
		transform:rotate(0deg);
		border-radius: 0px;
	}
	50%{
		border-radius: 100px;
	}
	100%{
		transform: rotate(360deg);
		border-radius: 0px;
	}
`

const Wrapper = styled.div`
	display: flex;
	height: 100vh;
	width: 100vw;
	justify-content: center;
	align-items: center;
`;
const Box = styled.div`
	height: 200px;
	width: 200px;
	background-color: tomato;
	animation: ${rotateAnimation} 1s linear infinite;
	span {
		font-size: 36px;
		&:hover{
			font-size: 50px;
		}
		&:active{ // 마우스 클릭하고 있는 상태가 active이다.
			opacity: 0;
		}
	}
`;

function Basic(){
	return(
		<Wrapper>
			<Box>
				<span>⏳</span>
			</Box>
		</Wrapper>
	)
}

꼭 모든 것을 컴포넌트 처리화 시키지 않아도, Box컴포넌트 안의 span태그를 타겟하여 처리할 수 있다.
애니메이션은 크게 다르진 않다. 그냥 조금 단순하게 생각하면 변수처럼 넣어준다는 정도이다.

타겟한 span안의 &:hover 같은 기능도 추가할 수 있다.(여기서 &은 span을 뜻하는 것과 마찬가지이다.)
But, 태그네임에 의존하고 있다.

Styled-Component의 Animation-Ch02(또 다르게 선택하는 방법)

import styled, {keyframes} from "styled-components";

const rotateAnimation = keyframes`
	0%{
		transform:rotate(0deg);
		border-radius: 0px;
	}
	50%{
		border-radius: 100px;
	}
	100%{
		transform: rotate(360deg);
		border-radius: 0px;
	}
`

const Wrapper = styled.div`
	display: flex;
	height: 100vh;
	width: 100vw;
	justify-content: center;
	align-items: center;
`;

const Emoji = styled.span`
	font-size: 36px;
`;
const Box = styled.div`
	height: 200px;
	width: 200px;
	background-color: tomato;
	animation: ${rotateAnimation} 1s linear infinite;
	${Emoji} : hover{
			font-size: 50px;
		}
`;

function Basic(){
	return(
		<Wrapper>
			<Box>
				<Emoji as="p">⏳</Emoji>
			</Box>
		</Wrapper>
	)
}

---

Styled-Component의 Theme(Feat.DarkMode)

::: 추후에 local Estate Management을 배우면 다크모드를 웹에 적용이 가능할 것이다.
theme는 모든 색상을 가지고 있는 하나의 Object이다.

theme실행과정
1. index.js

import {ThemeProvider} from "styled-components"

const root = ReactDOM.createRoot(
	document.getElementById("root") as HTMLElement
);
const darkTheme = {
	textColor: "whitesmoke",
	backgroundColor: "#111"
}
const ligthtTheme = {
	textColor: "#111",
	backgroundColor: "whitesmoke"
}
root.render(
	<ThemeProvider theme={darkTheme}>  // 다음과 같이 theme라는 props을 설정
		<App />
	</ThemeProvider>
);

2. Basic.js

const Title = stlyed.h1`
	color: ${(props) => props.theme.textColor}  // 다음과 같이 접근이 가능하다.
`;
const Wrapper = styled.div`
	display:flex;
	background-color:${(props) => props.theme.backgroundColor}
`;

function Basic(){
	return(
		<Wrapper>
			<Title>Hello</Title>
		</Wrapper>
	);
}

이건 테마를 설정하는 50% 방법만 아는 경우이다.
추후 100% 방법을 알게되면 정리해서 이 글의 링크를 걸어야겠다.