Styled component 에서 부모 박스에 hover 시 자식 박스의 상태 transition 주기

• 일반적인 CSS에서는 CSS 선택자를 이용하여 부모 박스에 hover를 지정하여 자식 요소의 상태 변화에 transition을 주는 것이 가능하다.
• 스타일드 컴포넌트에서도 이와 같은 방식으로 구현하려고 했으나, transition 코드가 동작하지 않아 매끄러운 상태 변화가 일어나지 않았다.
• 따라서 스타일드 컴포넌트의 props 속성을 이용하여 작성했다.
• 부모 박스에 onMouseOver 이벤트를 부여하여 해당 박스에 마우스를 올리면, active state에 해당 요소의 id 값을 갱신하도록 한다.

  const [active, setActive] = useState(false);
          <Shop
             onMouseOver={() => setActive(item.id)}
             onMouseOut={() => setActive(0)}
             key={item.id}
             onClick={() => navigate(`/${item.id}`)}
          >
     <NameBox active={active === item.id}>

• 마우스를 떼게 되면 active state에 0을 갱신한다.
• 그리고 transition 효과를 부여할 자식 태그에 active={active === item.id} 를 props로 내려보낸다.
  • 해당 요소에 마우스를 올리면 갱신된 active의 상태 값과 마우스가 올라간 요소의 id가 일치하게 되어 active는 true가 된다. 반대로 마우스를 떼게 되면, active 값은 0으로 갱신되어 해당 props는 false가 된다.
• 그리고 자식 요소의 CSS를 props.active가 true, false인지에 따라 위치를 조정하고 transition을 작성하면 된다.

const NameBox = styled.div`
  transition: all 0.2s ease-in-out;
  top: ${(props) => (props.active ? '-45px' : '-30px')};
`;

참고 자료(2)
1. https://codesandbox.io/s/yv5mm6m8qj?file=/src/index.js:251-270
2. https://velog.io/@seondal/React-useState-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-JS%EB%A1%9C-hover-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0