애니메이션을 만들어보자
Animations and Pseudo Selectors(1)
- 애니메이션을 줘보자
- 예제 1)
import styled from "styled-components";
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
`;
function App() {
return
<Wrapper>
<Box />
</Wrapper>
}- 스타일 컴포넌트 안에서 애니메이션을 주려면
keyframes가 필요하다. - 스타일 컴포넌트에서는 keyframes helper를 사용시 앱 전체에서 사용할 수 있는 고유한 인스턴스를 생성해준다.
import styled, { keyframes } from "styled-components";- 이제 Box 밖에서 애니메이션을 만들어주자
const rotationAnimation = keyframes` <<<----
from {
transfrom : rotate(0deg);
} to {
transfrom : rotate(360deg);
}
`;
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
animation: ${rotationAnimation} 1s linear infinite; <<<----
`;
linear: 일정한 속도로 진행infinite: 무한반복- 이렇게 하면 빙글빙글 도는 사각형을 얻는다!
- 더 멋있게 해볼까
- 예제 2)
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
animation: ${rotationAnimation} 1s linear infinite;
display: flex;
justify-content: center;
align-items: center;
`;
function App() {
return
<Wrapper>
<Box>
<span>😎</span>
</Box>
</Wrapper>
}<Box>컴포넌트안에span태그를 사용하여 이모지 추가- 이모지가 박스 중앙 위에 올라올 수 있도록
display: flex;설정추가 - 이모지가 너무 작아서 크기를 키우려는데,
이모지는 스타일 컴포넌트 안에 있지 않다. - 이모지가 있는
span태그를 스타일 컴포넌트로 만들 필요 없이,
Box 안의 span 를 선택할 수 있는 방법이 있다.
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
animation: ${rotationAnimation} 1s linear infinite;
display: flex;
justify-content: center;
align-items: center;
span { <<<----
font-size: 36px
}
`;
- 일반 css 처럼, 스타일 컴포넌트도 안에서 셀렉터를 사용해 값을 지정해줄 수 있다!
- 원한다면,
&:hover도 가능하다!
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
animation: ${rotationAnimation} 1s linear infinite;
display: flex;
justify-content: center;
align-items: center;
span {
font-size: 36px;
&:hover { // === span:hover 와 같음! <<<----
font-size 80px;
}
}
`;- 이렇게하면 빙글빙글 도는 사각형 안에 이모지가 있고 ..
이모지 위에 마우스를 올리면 이모지가 커지는 애니메이션을 만들 수 있다!
캡쳐 해놓을 걸 ㅋㅋ
Animations and Pseudo Selectors(2)
- 위에 작성한 내용에서
span태그를p태그로 바뀐다면?
당연히 작동되지 않을 것이다.span태그가 아니게 되었으니! - 하지만, 만약 내가 태그명에 의존하고 싶지 않다면?
- 우리만의 이모지 스타일 컴포넌트를 만들어서,
BOX 컴포넌트 안에 Emoji 컴포넌트를 직접적으로 타겟팅해주면 된다.- 예제 1)
const Emoji = styled.span`
font-size: 36px;
`;
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
animation: ${rotationAnimation} 1s linear infinite;
display: flex;
justify-content: center;
align-items: center;
${Emoji} { <<<----
&:hover {
font-size 98px;
}
}
`;
function App() {
return
<Wrapper>
<Box>
<Emoji as="p">😎</Emoji>
</Box>
</Wrapper>
}- 이렇게하면,
Emoji가span태그이든,p태그이든 상관없이 적용된다!!
왜냐하면, Emoji 라는 컴포넌트를 지목하고 있으니까~!
${Emoji}:hover {
font-size 98px;
}- 이렇게 줄여 쓸수도 있따
Themes
- styled components는 ThemeProvider wrapper 컴포넌트를 통해 전체 테마를 지원.
이 컴포넌트는 컨텍스트 API를 통해 자체 아래에 있는 모든 React 구성 요소에 테마를 제공한다.
렌더 트리에서 모든 스타일 구성 요소는 여러 수준의 깊이에 있는 경우에도 제공된 테마에 액세스할 수 있다! - 사용방법
import { ThemeProvider } from "styled-components";
<ThemeProvider theme={theme}>
</ThemeProvider>- 다크모드, 라이트모드를 구현해보자.
- 예제 1)
// -index.js
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<ThemeProvider>
<App />
</ThemeProvider>
</React.StrictMode>
);- 사용을 위해
ThemeProvider를 import 하고,
<App />컴포넌트를<ThemeProvider>로 감쌌다. ThemeProvider는 1개의 prop 을 가진다.theme!
// -index.js
const darkTheme = { <<<----
textColor:"whitesmoke",
backgroundColor:"#111",
}
const lightTheme = { <<<----
textColor:"#111",
backgroundColor:"whitesmoke",
}
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode> <<<----
<ThemeProvider theme={lightTheme}>
<App />
</ThemeProvider>
</React.StrictMode>
);- 다크모드, 라이트모드를 만들어준 후
ThemeProvider에theme={darkTheme}prop 으로 주면서, 다크모드로 설정 - 이렇게 하면,
<App />이ThemeProvider안에 있기 때문에
원한다면<App />안에 있는 컴포넌트들이 색상(textColor, backgroundColor)에 접근할 수 있다! - 어떻게 가져올까?
// -App.js
const Title = styled.h1`
color: ${(props) => props.theme.textColor}
`;-
ThemeProvider안에 둘러싸인 모든 컴포넌트는ThemeProvider에 접근하여 값을 사용할 수 있다.
-
이제 라이트 모드를 설정해보자
// -index.js
const darkTheme = {
textColor:"whitesmoke",
backgroundColor:"#111",
}
const lightTheme = {
textColor:"#111",
backgroundColor:"whitesmoke",
}
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<ThemeProvider theme={lightTheme}> <<<----
<App />
</ThemeProvider>
</React.StrictMode>
);ThemeProvider의 prop 에theme={lightTheme}라이트모드로 바꿔주기만 하면된다.
이미 라이트모드 다크모드 두개의 theme 이 동일한 프로퍼티 이름을 같고 있으므로, 이렇게 해주면 바로 라이트모드로 전환됨!
