혹시라도 성능 이슈 때문에 컴포넌트를 미리 그려놓고,

버튼 클릭할 때마다 빠르게 해당 컴포넌트들을 그려야 할 경우,

아래와 같이 처리하면 됩니다.

미리 모든 컴포넌트들을 한 번에 불러와 놓고,

visibility와 height를 가지고 처리하는 방법입니다.

const Wrapper = styled.div<WrapperProps>`

  height: 0;

  visibility: hidden;

  ${(props) =>

    props.active &&

    css`

      height: 100%;

      visibility: visible;

    `}

`;