## Basic
Style Component는 React의 컴포넌트를 **두 부분(스타일, 구현)으로 나눌 수 있게** 끔 해준다.
이를 통해 가시성이 늘어나며 구현의 난이도를 줄여준다.
- Style Components Import
```jsx
import styled from "styled-components";
```
Style Component는 **(back tick)** 을 통해 CSS 내용을 정의할 수 있다.
Style Componen 자동으로 객체의 Class Name을 임의로 설정해준다.
### Style Component 적용 전
```jsx
<div style={{ display: "flex" }}>
<div style={{ backgroundColor: "teal", width: "100px", height: "100px" }}>
</div>
<div style={{ backgroundColor: "tomato", width: "100px", height: "100px" }}>
</div>
</div>
```
### Style Component 적용 후
```jsx
const Father = styled.div`
display: flex;
`;
const BoxOne = styled.div`
background-color: teal;
width: 100px;
height: 100px;
`;
const BoxTwo = styled.div`
background-color: tomato;
width: 100px;
height: 100px;
`;
function App() {
return (
<Father>
<BoxOne />
<BoxTwo />
</Father>
);
}
```
💡가시성이 더 좋아지고 코드를 작성하거나 수정하기에도 용이하다.
## Pros and Extend
### Pros
Componet에 Pros를 추가하여 메인 Function에서 해당 Style Component를 호출 할 때 값을 설정할 수 있다.
```jsx
const Box = styled.div`
background-color: ${props => props.bgColor};
width: 100px;
height: 100px;
`;
function App() {
return (
<Father>
<Box bgColor="teal" />
<Box bgColor="tomato" />
</Father>
);
}
```
### Extend
Style Components는 **Inheritance**을 통해서 코드의 효과적으로 재사용할 수 있다,
```jsx
const Box = styled.div`
background-color: ${props => props.bgColor};
width: 100px;
height: 100px;
`;
const Circle = styled(Box)`
border-radius: 50%;
`;
function App() {
return (
<Father>
<Box bgColor="teal" />
<Circle bgColor="tomato" />
</Father>
);
}
```
## HTML Tag Trick
### AS
특정 상황에서 Tag의 이름을 바꾸고 싶을 때는 **as에 원하는 Tag 값**을 적어 Pros에 넣어주면 된다.
```jsx
const Btn = styled.button`
color: white;
background-color: tomato;
border: 0;
border-radius: 15px;
`;
function App() {
return (
<Father>
<Btn as ="a">Click me</Btn>
</Father>
);
}
```
💡 Btn Component는 button Tag를 사용했지만 Main Function에서 **as**를 통해 Tag이름을 **a로** 바꾸었다.
### Attrs
만약 Style Component에서 각 생성한 객체에게 값을 전달해 주길 원한다면 **Attrs**를 사용할 수 있다.
```jsx
const Input = styled.input.attrs({ required: true, minLength: 10 })`
background-color: tomato;
`;
function App() {
return (
<Father>
<Input />
<Input />
<Input />
<Input />
</Father>
);
}
```
💡**Input** 안에 하나하나 넣지 않고 **Style Componen**t가 전달해줄 수 있다.
![[TagAS.png]]
## Animation
**key frames**을 이용헤 **Style Componet**에서 애니메이션을 설정할 수 있다.
- Import key frames
```jsx
import styled, { keyframes } from "styled-components";
```
- 애니메이션 예시 Code
```jsx
**const rotateAnimation = keyframes`
0% {
transform: rotate(0deg);
border-radius: 0px;
}
50% {
transform: rotate(360deg);
border-radius: 100px;
}
100% {
transform: rotate(0deg);
border-radius: 0px;
}
`;
const Box = styled.div`
background-color : tomato;
width: 200px;
height: 200px;
animation: ${rotateAnimation} 1s linear infinite;
`;**
```
## Pseudo Selectors
객체 안에 있는 또 다른 컴포넌트를 객체의 Style Component에서 설정 할 수 있다.
```jsx
const Box = styled.div`
.
.
span {
font-size: 36px;
&:hover {
font-size: 48px;
}
}
`;
function App() {
return (
<Father>
<Box>
<span>👊</span>
</Box>
</Father>
);
}
```
Selector는 Tag Name 말고도 **Style Component의 변수명**으로도 설정 할 수 있다.
```jsx
const Emoji = styled.span`
font-size: 36px;
`;
const Box = styled.div`
.
.
${Emoji} {
&:hover {
font-size: 90px;
}
}
`;
function App() {
return (
<Father>
<Box>
<Emoji>👊</Emoji>
</Box>
</Father>
);
}
```
## Theme
Style Component는 **ThemeProvider**통해 **Theam**을 설정할 수 있다.
`index JS` 에서 **ThemeProvider**을 Import 한 후 `App` 을 **ThemeProvider**로 감싼 후 Pros에 T**heme** 값을 넣어주면 된다.
```jsx
import { ThemeProvider } from 'styled-components';
// Theme 값 설정
const darkTheme = {
textColor: "whitesmoke",
backgroundColor: "#111",
};
const lightTheme = {
textColor: "#111",
backgroundColor: "whitesmoke",
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ThemeProvider theme={darkTheme}>
<App />
</ThemeProvider>
</React.StrictMode>
);
```
**ThemeProvider**로 가져온 Pros의 값은 `App JS` 에서 가져와 사용할 수 있다.
```jsx
const Title = styled.h1`
color: ${props => props.theme.textColor};
`;
const Wrapper = styled.div`
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
background-color: ${props => props.theme.backgroundColor};
`;
function App() {
return (
<Wrapper>
<Father>
<Title>Hello</Title>
</Father>
</Wrapper>
);
}
```
💡여기서 주의할 점은 **Theme**의 **property의 이름**이 똑같아야 된다는 것이다!
## Create Global Style
- 전체의 Element의 Style을 적용하고 싶을 때 사용한다.
- 보통 `Reset Style`이나 `Font`를 설정할 때 많이 사용한다.
```jsx
import styled, { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
/*Reset*/
`
function App() {
return (
<>
<GlobalStyle />
<Container>
<RouterProvider router={router} />
</Container>
</>
);
```