[FE] Props를 활용한 Styled-components 트러블 슈팅

🦍 Why

프로젝트 진행 중, props로 전달된 값에 따라 div의 크기를 조절하는 스타일을 Styled-components를 활용해 작성했습니다. props로 전달되는 값은 수시로 변화하는 값이었으며, 이에 따라 무수히 많은 클래스가 생성되었고 이는 성능적 이슈를 일으켰습니다.

 

🐕 What

기존에는 스타일드 컴포넌트가 어떤 원리로 동작하는지 이해하지 못했습니다. 이 문제를 해결하기 위해 크롬 관리자도구에서 DOM 요소를 확인해 봤을 때, 계속해서 클래스명이 변화하는 것을 통해 props가 변할 때 마다 새로운 클래스를 생성하고, 이를 적용시키는 과정이 반복됨을 확인했습니다.

 

따라서 계속되는 클래스 생성을 막으면 되지 않을까 생각했습니다.

 

문제 상황

// 문제가 됐던 기존 코드

// 스타일 코드
export const VolumeBar = styled.div<{ volume: number; idx: number }>`
  width: 0.4svw;
  height: ${(props) => Math.min(0.2 + ((props.volume / 20) * Math.random()) / Math.abs(4.5 - props.idx), 4)}svw;
  background-color: ${color(0.7).dark};
  transition: height 0.2s;
`;

// 컴포넌트 코드
<S.Volume>
  {[...Array(9)].map((it, idx) => (
    <S.VolumeBar volume={volume} idx={idx} key={idx} />
  ))}
</S.Volume>

setInterval 같은 비동기 작업이 뒤로 밀리는 등의 성능적 이슈도 발생했습니다.

 

🦢 How

위 문제 해결을 위해 기존 스타일 코드에서 Props를 전달받는 부분을 수정하기로 했습니다.

해당 부분만 따로 빼내 인라인 스타일로 적용해보기로 결정했습니다.

 

// 수정 후 코드

// 스타일링 코드
export const VolumeBar = styled.div`
  width: 0.3svw;
  background-color: ${color(0.7).dark};
  transition: height 0.2s;
`;

// 컴포넌트 코드
{[...Array(15)].map((it, idx) => (
  <S.VolumeBar
    className="bar"
    style={{ height: `${Math.min(0.2 + ((volume / 20) * Math.random()) / Math.abs(7.5 - idx), 4)}svw` }}
    key={idx}
  />
))}

 

기존 스타일링 코드에서 height 부분을 제거했습니다. 해당 부분을 tsx 파일 내에서 직접 인라인 스타일로 지정했습니다.

 

 

수정 코드 적용 후 더 이상 클래스가 추가로 생성되지 않았으며 이에 따른 성능 이슈도 해결할 수 있었습니다.

 

추가적으로 Styled-components의 attr 메서드를 활용해 해결하는 방법도 확인했으나 이는 추후에 학습해보도록 하겠습니다.