[React]📘 ProgressBar 렌더링 리팩터링

---

배경

→ 기존에는 width를 $prop 으로 직접 조절했으나 ❗️layout 변화 발생&리플로우 발생❗️

이를 해결 하고자 리팩토링 실행

들어가기에 앞서…

✅ scaleX()란?

transform: scaleX(n)은

요소의 가로 길이(width)를 n배로 확대/축소

• n = 1 → 원래 크기

• n = 0.5 → 가로 길이가 절반

• n = 2 → 가로 길이 2배

• n = 0 → 가로 길이 0 (안 보임)

---

✅ 시각적으로 보면:

transform: scaleX(0.5);

이건 해당 요소를 왼쪽 기준으로 가로만 50%로 줄이는 효과.

✔️ 중요한 점: 실제 width를 바꾸는 게 아니라 “보여지는 크기”만 바뀜

→ 그래서 GPU(그래픽 가속)로 애니메이션이 훨씬 부드럽다.

---

✅ 왜 width보다 좋냐?

기준	width	transform: scaleX()
동작	layout 변화 발생	layout 변화 없음
리플로우	생김 (느림)	없음 (빠름)
성능	CPU 기반	GPU 가속
부드러움	중간	✅ 훨씬 부드러움
추천	간단할 땐 OK	고성능 UI엔 강력 추천

---

📦 결론

scaleX()는 눈에 보이는

길이만 축소/확대

애니메이션 최적화할 때 자주 쓰이는 핵심 속성.

---

♻️리팩토링

현재 코드에서 ProgressBar를 transform: scaleX() 기반으로 개선한 내용과,

기존 width 방식과의 차이점, 장단점, 최종적으로 왜 이렇게 바꿨는지를 포함한 문서.

✅ 목표

기존 width 기반 진행바에서

더 부드럽고 성능 좋은 transform: scaleX() 기반 진행바로 개선함.

이 문서는 해당 리팩터링의 동기, 기술 개념, 차이점, 장점, 주의사항을 모두 문서화한 자료다.

---

🎯 개선 목적

기존 방식 (width)	문제점
width: ${progress}%	브라우저 레이아웃(Layout Reflow) 발생 가능성
transition 적용 시 살짝 끊김	부드럽지 않음, 애니메이션 성능 떨어짐
DOM 사이즈 직접 조절	브라우저 연산 비용 큼 (CPU)

---

✅ 개선된 방식: transform: scaleX()

✅ 개념 요약

transform: scaleX(n);

• 요소의 가로 방향 스케일을 조절

• n = 0 → 가로 길이 0%

• n = 1 → 가로 길이 100%

• n = 0.5 → 가로 길이 50%

---

✅ 추가 속성

transform-origin: left;

• 왼쪽을 기준으로 커지거나 줄어듦

• 진행 바처럼 왼쪽 → 오른쪽 자연스러운 확장 가능

---

🔍 전체 리팩터링 코드

const ProgressBarWrapper = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
`;

const ProgressFill = styled.div`
  height: 100%;
  width: 100%;
  background-color: ${({ theme }) => theme.surface.brandDefault};
  transform-origin: left;
  transform: scaleX(${({ $progress }) => $progress / 100});
  transition: transform 0.5s linear;
  will-change: transform;
  opacity: 0.8;
`;

return (
  <ProgressBarWrapper>
    <ProgressFill $progress={progress} />
  </ProgressBarWrapper>
);

---

🆚 기존 방식과 개선 포인트 비교

항목	기존 방식 (width)	개선 방식 (scaleX)
렌더링 성능	CPU 중심	✅ GPU 중심 (transform)
애니메이션	끊김 있음	✅ 매우 부드러움
DOM layout 영향	layout 재계산 발생	✅ layout 영향 없음
리소스 비용	높음	✅ 낮음
CSS transition	width transition	transform transition (더 부드러움)
시각적 제어	비교적 직관적	초기 학습 필요하지만 효과 우수

---

📌 실전에서 주의할 점

항목	설명
transform-origin	반드시 left로 설정해야 진행바처럼 동작
transition	transform에만 적용해야 자연스러움
width: 100% 유지	스케일 조정이기 때문에 실제 박스는 항상 100%여야 함
will-change: transform	브라우저에 사전 힌트 줘서 성능 향상

---

🧠 왜 이렇게 바꿨는가?

• width 기반은 간단하지만, 부드럽지 않고 성능 최적화 어려움

• transform 기반은 GPU 가속 → 프레임 드랍 없이 부드러움

• 특히 저사양 디바이스, 모바일에서 체감 차이 큼

• 시각적으로도 훨씬 매끄러운 UX 제공 가능

---

✅ 최종 요약

내용	설명
사용 속성	transform: scaleX(), transform-origin: left
성능	✅ 부드럽고 최적화됨
쓰임	진행바, 로딩바, 그래픽 시각화
리액트 연동 방식	상태값 → 스케일 비율로 반영