transform : 애니메이션이나 동적인 위치 변경이 필요한 경우
✅ transform은 composition 단계에서 실행되기 때문에 reflow나 repaint를 유발하지 않기 때문에 성능에 좋음
🚫 position은 top, left 등의 속성을 변경하면 브라우저는 주변 요소들의 위치를 다시 계산하는 과정부터 수행하게 되므로 reflow, repaint를 유발하여 성능 부하를 높임
Compose가 UI를 그리는 3단계
- Composition : UI가 무엇을 그릴지 결정
- Layout : UI요소들의 크기와 위치 결정
- Drawing : UI 실제로 그림
position : 레이아웃의 구조를 잡거나, 부모를 기준으로 위치를 조정할 경우
🚫 transform은 시각적인 위치만 변경할 뿐 실제 문서 흐름과는 무관하게 동작하기 때문에, 문서 흐름에 따라 조정되는 경우에는 사용할 수 없음
