#2.5 Pseudo Selectors part Two

본 포스팅은 노마드코더의 ReactJs 마스터 클래스 강의를 수강하고 작성되었습니다.

styled component 안의 element를 선택하는 다른 방법이 有

• 하나의 컴포넌트 안에 있는 다른 컴포넌트를 target하는 것은 동일
• But! target을 할때, 직접적으로 태그를 지정한다면 나중에 Attrs를 사용해서 속성을 바꿀 경우, 스타일은 지정이 안되는 문제점이 有
• So. 아래 예시와 같이 함

import styled, { keyframes } from "styled-components";

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

const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius:0px;
  }
  50% {
    border-radius:100px;
  }
  100%{
    transform:rotate(360deg);
    border-radius:0px;
  }
`;

//변경된 부분들
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: ${rotationAnimation} 1s linear infinite;
  ${Emoji}:hover {
    font-size: 98px;
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji>🤩</Emoji>
      </Box>
      <Emoji>🔥</Emoji> //이 이모지는 위에 styled-component 내에서 선택되지 X (Box안에 X니까)
    </Wrapper>
  );
}

• Box 컴포넌트 안에 Emoji 컴포넌트를 직접적으로 타겟팅 할 수 있음 -> Emoji 를 직접적으로 작성함으로써