React-master #2

애니메이션을 만들어보자

---

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 이 동일한 프로퍼티 이름을 같고 있으므로, 이렇게 해주면 바로 라이트모드로 전환됨!
  

---

• animations 🚩 https://styled-components.com/docs/basics#animations
• 🚩 https://styled-components.com/docs/advanced