[React] styled-components keyframes, psuedo selectors, state selector (3)

이번 주제는 styled-components라이브러리의 keyframes와 component selector,state selector 사용법이다.

keyframes

keyframes는 styled-components 내에서 애니메이션을 다룰때 사용한다.

styled와 keyframes를 import하고 Wrapper, Box component를 만들어준다.

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

const Wrapper = styled.div`
  display: flex;
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
`;

function App() {
  return (
    <Wrapper>
      <Box></Box>
    </Wrapper>
  );
}

Box component에 emoji를 넣고 빙글빙글 돌리는 애니메이션 설정을 추가하고자한다.

1. 일단 Emoji component를 생성한다.
2. Emogi component 안에 emoji를 넣는다.
3. 애니메이션 설정을 정의한다.
4. 애니메이션 설정을 Box component 에 넣는다.

const Emoji = styled.span`
  font-size: 30px;
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji>😀</Emoji>
      </Box>
      <Emoji>😁</Emoji>
      //비교를 위해 Box외부에 Emoji를 작성해줌
    </Wrapper>
  );
}

//애니메이션 설정을 keyframes를 사용
const rotateAnimation = keyframes`
  0%{
    transform:rotate(0deg);
    border-radius:0px;
  }
  50%{
    border-radius:100px;

  }
  100%{
    transform:rotate(360deg);
    border-radius:0px;
  }
`;

https://styled-components.com/docs/api#keyframes
https://styled-components.com/docs/basics#animations
위의 animation 섹션 설명에 따르면 styled-components의 css는 한 component에 국한되어서 사용되는 것이 아니지만 name collision을 막으려면 css가 전역에 사용되는 것을 피하기 위해 하나의 인스턴스를 만들어서 사용할 component의 속성에 넣어준다.

const Box = styled.div`
	...
	animation: ${rotateAnimation} 10s linear infinite;
	...
`;

---

psuedo selector

컴포넌트 내부에 있는 컴포넌트를 선택해서 css를 설정할때 용이한 방법이다. 일반적인 css를 사용할때와 다르게 부모 인스턴스 안에 있는 컴포넌트를 직접 타켓팅 한다

const Box = styled.div`
	...
    //이렇게 emoji가 들어있는 span을 타겟팅할 수 있다.
	span{
    	font-size:16px;
    }
`;


function App() {
  return (
    <Wrapper>
      <Box>
        <span>👩</span>
      </Box>
    </Wrapper>
  );
}

또다른 방법은 Box component안에 존재하는 emoji(를 담고있는 span) component를 인스턴스로 만들어서 타켓팅하는 방법이다.

1. emoji component를 인스턴스로 작성한다.
2. Box component내부에 emoji component를 넣는다.

const Emoji = styled.span`
	font-size:36px;
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotateAnimation} 10s linear infinite;
  ${Emoji}:hover {
    font-size: 100px;
  }
`;

이렇게 코드를 작성하면 Emoji component의 태그를 변경해도 Emoji component가 Box component내부에 존재하는 한 기존의 기능이 동작한다.

---

state selector

component 들의 :hover, :active 와 같은 속성을 추가할때 사용한다.

const Box = styled.div`
	...
	// span을 p로 변경하면 hover가 적용되지 않는다.
	span{
    	font-size:16px;
        &:hover{
        	color:red;
        }
    }
    //또는 이렇게 작성할 수도있다.   
    span:hover{
    
    }
`;