📚 Reference

• 공식 문서 1

📜 Chapter

‣

transform

• transform
• transform 안에서 자주 쓰는 translateX, translateY, rotate는 컴포넌트의 시각적 위치와 회전을 조절하는 핵심 속성이다.
• React Native에선 순서가 매우 중요하며, CSS처럼 transform-origin이 없기 때문에 조합해서 기준점을 만들고 회전시켜야 한다.
• transform은 배열 형태로 여러 동작을 순서대로 적용할 수 있는 스타일 속성이다.

transform: [
  { translateX: ... },
  { translateY: ... },
  { rotate: ... },
]

• 순서가 중요하다.
• 나중에 오는 transform이 앞의 transform 결과에 영향을 받는다.

translateX, translateY

• 컴포넌트를 좌우(X축) 또는 상하(Y축) 로 이동
• 단위는 px이고, 양수는 오른쪽/아래, 음수는 왼쪽/위

transform: [
  { translateX: 50 },   // 오른쪽으로 50px 이동
  { translateY: -20 },  // 위로 20px 이동
]