스켈레톤 만들기

기존 스켈레톤 구현 방식이 맘에 들지않아 스켈레톤 컴포넌트를 새로 생각해봤다.

기존 컴포넌트 문제

• 한정된 skeleton속성. 새롭고 복잡한 형태의 스켈레톤을 제작하게 될 때 기존 스켈레톤 코드에 변경을 발생시킴.
• 간단히, Skeleton에 스타일 관련 props를 전달해 스타일링을 함.

음 . . . 💭

• 기본 스타일이 정해진 컴포넌트를 Skeleton 컴포넌트에 전달하는 건 어떨까?

개선된 컴포넌트

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

const gradientEffect = keyframes`
  50% {
    opacity: 0.5;
  }
`;

const StyledSkeleton = styled.div`
  & > * {
    transition: 1s;
    background-color: #828282;
    animation: 2s ${gradientEffect} infinite;
  }
`;

const Skeleton = (props) => {
  return <StyledSkeleton>{props.Component}</StyledSkeleton>;
};

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        gap: 10
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: 10
        }}
      >
        <Skeleton
          Component={
            <div style={{ width: 180, height: 30, borderRadius: 50 }} />
          }
        />
        <Skeleton
          Component={
            <div style={{ width: 200, height: 30, borderRadius: 50 }} />
          }
        />
      </div>
      <Skeleton
        Component={
          <div style={{ width: 50, height: "100%", borderRadius: 20 }} />
        }
      />
    </div>
  );
}

스타일링을 미리 한 후 Skeleton에 전달하는 방식이다.
기존에는 skeleton의 제한된 속성으로만 스타일링하던 방식이었다. width, height 그리고 borderRadius로 최소한의 속성들만 존재했다. 최소한의 속성만을 필요로한다면 괜찮겠지만, 나는 이런 제한적인 속성에 불만이었다.

위의 Skeleton의 역할은 오로지 children에게 animation을 부여하는 것이다.
유연한 Skeleton 컴포넌트 스타일링이 가능해졌다. 새로운 Skeleton 스타일링을 위해 속성추가하는 것에 대해 고민할 필요도 없고, 커스텀하기 위해 외부 노드에서 Skeleton에 접근해 강제적으로 스타일을 바꿀 필요도 없다.
원하는 모양대로 스타일링이 될 것이다.

예전 방식과 같이, 유연하지 않은 skeleton을 개선하고 싶어 문제점을 개선한 새로운 Skeleton 컴포넌트를 만들어보았다.