[STYLED COMPONENTS] 컴포넌트 안에서 컴포넌트 타겟팅 하기

학습일 : 2023. 03. 29

---

이번시간에는 컴포넌트 안에서 컴포넌트 타겟팅을 해보기로 한다.

 

이것이 필요한 상황에 대해 설명해보자면

 

우선, 먼저 이렇게 Box를 정의 해준 상태에서

// Box
const Box = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: salmon;
  height: 200px;
  width: 200px;
  animation: ${rotationAnimation} 10s linear infinite;
  // target처리
span {
    font-size: 2rem;
    &:hover {
      font-size: 5rem;
      background-color: black;
    }
    &:active{
      opacity: 0;
    }
  }
`;

 

밑에 App() 에서 

span 태그가 아니라 p 태그로 바꾸게 된다면?

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

export default App;

이렇게 될 것이고

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

export default App;

결국 위에서 Box 컴포넌트를 정의해준 부분에서 span target 처리 해준 부분이 

인식이 되지 않아서

css 적용이 되지 않음을 볼 수 있다.

이를 해결하기 위해서는

 

 

 

// Box
const Box = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: salmon;
  height: 200px;
  width: 200px;
  animation: ${rotationAnimation} 10s linear infinite;
  // target처리
  span {
    font-size: 2rem;
    &:hover {
      font-size: 5rem;
      background-color: black;
    }
    &:active{
      opacity: 0;
    }
  }
`;

여기에서

  p {
    font-size: 2rem;
    &:hover {
      font-size: 5rem;
      background-color: black;
    }
    &:active{
      opacity: 0;
    }
  }
`;

이렇게
span을 p로 바꾸어주어야 하는데
이렇게 태그에 의존하고 싶지는 않다면???


일단

// Emoji
const Emoji = styled.span`
font-size: 36px; // 기본값 36px
`;

이렇게 Emoji 컴포넌트를 먼저 만들어 준 다음(이름은 상관 없음)

Box 컴포넌트 안에서 Emoji 컴포넌트를 직접적으로 타겟팅 할 수 있는데!
그런 바로 이런식으로 타겟팅 하면 된다!

짠

  ${Emoji} {
    font-size: 2rem;
    &:hover {
      font-size: 5rem;
      background-color: black;
    }
    &:active{
      opacity: 0;
    }
  }
`;

 

 

아래 전체 코드에서
Box 컴포넌트와 Emoji 컴포넌트의 연관성을 잘 살펴보면 된다.

전체코드

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

const Wrapper = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;

  width: 100vw;
  height: 100vh;
`;

// animation
const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius: 0px;
    background-color: red;
  }
  50% {
    transform:rotate(360deg);
    border-radius: 100px;
    background-color: yellow;

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

// Emoji
const Emoji = styled.span`
font-size: 36px; // 기본값 36px
`;  

// Box
const Box = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: salmon;
  height: 200px;
  width: 200px;
  animation: ${rotationAnimation} 10s linear infinite;
  // target처리
  ${Emoji} {
    font-size: 2rem;
    &:hover {
      font-size: 5rem;
      background-color: black;
    }
    &:active{
      opacity: 0;
    }
  }
`;

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

export default App;

 

 

 

너무 멋진걸

정상적으로 작동됨을 볼 수 있다.

 

 

---

타겟팅을 당하지 않게 하려면

밑에 App() 부분에

<Box> 컴포넌트 밖에 적어주면

타켓팅이 되지 않아 css 가 적용되지 않는다.

 

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

const Wrapper = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;

  width: 100vw;
  height: 100vh;
`;

// animation
const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius: 0px;
    background-color: red;
  }
  50% {
    transform:rotate(360deg);
    border-radius: 100px;
    background-color: yellow;

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

// Emoji
const Emoji = styled.span`
font-size: 36px; // 기본값 36px
`;  

// Box
const Box = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
 
  height: 200px;
  width: 200px;
  animation: ${rotationAnimation} 10s linear infinite;
  // target처리
  ${Emoji} {
    font-size: 2rem;
    &:hover {
      font-size: 5rem;
      background-color: black;
    }
    &:active{
      opacity: 0;
    }
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji as="div">🐠</Emoji>
      </Box>
      <Emoji as="div">🐷</Emoji> {/*얘는 타겟팅에 해당되지 않음*/}
    </Wrapper>
  );
}

export default App;

 

실행결과

타겟팅 된 물고기는 css가 잘 적용되고

돼지는 적용이 안되었음을 살펴볼 수 있다;