React 106 _ styled-components

npx create-react-app my-app-style --template=typescript

.App-header{
    background-color: red !important;
}

<link rel="stylesheet" href="%PUBLIC_URL%/temp.css"/>
<title>React App</title>

npm start

.App-header {
  background-color: #282c34 !important;

my-app-style>cd my-app-style
npm install --save-dev @types/styled-components jest-styled-components

import './App.css';
import Styled from 'styled-components';

...
import Styled from 'styled-components';

const Container = Styled.div`
`;
...

...
const Container = Styled.div`
	text-align: center;
`;
...

function App() {
  return (
    //<div className="App">
    <Container>
      ...
    </Container>
    //</div>
  );
}

태그 부분은 삭제해되 되지만 비교하기 쉽게 하니까 공부하는거니까 주석 처리했다.

• 내가 만든 styled-components를 사용하기 위해
  태그의 css 클래스 명을 제거하고
• 태그 대신 styled-components로 만든 컴포넌트를 사용했다 >리액트에서는 class 대신 className을 사용해 클래스를 지정한다.

브라우저는 아무 변화 없이 잘 돌아간다.

• 태그 도 변경해 보자 (App.css파일에 있는 코드이다)

...
const Container = Styled.div`
  text-align: center;
`;
const Header = Styled.header`
background-color:#282c34 !important;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:calc(10px+2vmin);
color:white;
`;
...

앞에서 만든 Container 컴포넌트와 마찬가지로 Styled[HTML태그]와 탬플릿 리터럴을 사용해 Header 컴포넌트를 정의했다

• 이렇게 생성한 styled-components의 컴포넌트를 사용하기 위해 App.tsx파일을 수정한다.

...
function App() {
  return (
    //<div className="App">
    <Container>
      {/*<header className="App-header">*/}
      <Header>
        ...
        </Header>
      {/*</header>*/}
    </Container>
    //</div>
  );
}

역시 비교하기 쉽게 하려고

태그를 삭제하지 않고 주석 처리 했다. 그리고 styled-components로 만든 Header 컴포넌트를 태그 대신 사용했다

• 애니메이션이 표함되어 조금 복잡한 .App-logo 클래스를 변경해보자 App.tsx

...
const AppLogo = Styled.img`
  height: 40vmin;
  pointer-events: none;
`;
...

실제 사용하는 부분도 수정해 준다.

...
{/*<img src={logo} className="App-logo" alt="logo" />*/}
<AppLogo src={logo} alt="logo" />
...

로고는 나오지만 애니메이션은 적용하지 않았기 때문에 회전하지는 않는다.

• 회전 애니메이션 추가

...
const AppLogo = Styled.img`
  height: 40vmin;
  pointer-events: none;
  @media (prefers-reduced-motion: no-preference){
    animation: App-logo-spin infinite 20s linear;
  }
  @keyframes App-logo-spin{
    from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
`;
...

이것 역시 App.css파일을 복붙한건데 차이가 있다면 css는 애니메이션을 사용할 클래스명이 다르다

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

반면 styled-components에서는 해당 컴포넌트가 직접 애니메이션을 수행하므로 클래스명을 특별히 지정하지 않아도 된다.

...
const AppLogo = Styled.img`
 ...
  @media (prefers-reduced-motion: no-preference){
    animation: App-logo-spin infinite 20s linear;
  }
 ...
`;

이렇게 수정한 후 브라우저를 확인해 보면 이전과 같이 로고가 잘 회전하고 있는걸 볼 수 있다.

이렇게 애니메이션이 한 곳에서만 사용되는 경우, 하나의 컴포넌트에 전부 선언하여도 된다.
하지만 여러곳에서 같은 애니메이션을 사용한다면 styled-components의 keyframes을 사용해 분리할 수 있다. App.tsx

import Styled, {keyframes} from 'styled-components';

그리고 keyframes를 사용해 로고 이미지에서 사용할 회전 애니메이션을 선언한다.

const spin = keyframes`
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
`;

실제 애니메이션을 사용하는 부분에 keyframes를 적용한다.

const AppLogo = Styled.img`
  height: 40vmin;
  pointer-events: none;
  @media (prefers-reduced-motion: no-preference){
    animation: ${spin} infinite 20s linear;
  }
`;

styled-components는 자바스크립트의 탬플릿 리터럴을 사용하기 때문에 위와 같이 문자열 중간에 자바스크립트 변수를 사용할 수 있다. 이처럼 자주 반복되어 사용되는 애니메이션은 keyframes를 사용해 미리 정의하고 필요한 부분에서 불러와 사용하면 된다.

태그에는 어떤 스타일도 적용되어 있지 않으니 패스하고 `.App-link`클래스를 변경해보자

App.tsx

...
const AppLink = Styled.a`
  color: #61dafb;
`;
...
<AppLink
  href="https://reactjs.org"
  target="_blank"
  rel="noopener noreferrer"
  >
    Learn React
</AppLink>

스타일에 관예하는 모든 css 내용을 수정했다 이제 import를 해제해도 그대로 메인 페이지가 잘 보인다.

그럼 이제 이 코드가 제대로 동작하는지 확인해보자. 이전에 사용했던 코드들을 사용할 것이다.

--업데이트 됨