SwiftUI에서 많이 하는 실수 - animation()을 남발해 의도치 않은 애니메이션이 발생하는 실수

SwiftUI에서 많이 하는 실수 - animation()을 남발해 의도치 않은 애니메이션이 발생하는 실수

 

SwiftUI의 애니메이션은 선언적이기 때문에, 어디에 .animation()을 붙이느냐에 따라
전혀 예상하지 못한 부분까지 애니메이션이 적용될 수 있습니다.
특히, View.animation(_:, value:) 또는 .animation(_:)를 광범위하게 사용하면
모든 상태 변화에 애니메이션이 걸려 UI가 어색해지거나 성능이 나빠질 수 있습니다.

---

1. 문제 원인

• “그냥 .animation(.default)을 붙이면 부드러워지겠지”라는 생각
• withAnimation과 animation modifier의 차이를 정확히 모름
• value 파라미터를 제대로 지정하지 않음

---

2. 나타나는 증상

• 리스트 삽입/삭제뿐 아니라, 텍스트 변경, 색상 변경까지 전부 애니메이션됨
• 스크롤/입력 때도 애니메이션이 과도하게 걸려 어색한 UX
• 특정 상태 변경에서만 애니메이션을 원하지만, 다른 곳도 함께 움직임

---

3. 잘못된 코드 예시

struct BadAnimationView: View {
    @State private var isExpanded = false
    @State private var counter = 0

    var body: some View {
        VStack {
            Button("토글") {
                isExpanded.toggle()
            }
            Button("카운트") {
                counter += 1
            }
            Text("Counter: \(counter)")

            Rectangle()
                .frame(height: isExpanded ? 200 : 50)
        }
        .animation(.easeInOut, value: isExpanded) // ❌ 괜찮아 보이지만...
        .animation(.easeInOut, value: counter)    // ❌ 중첩 사용
    }
}

• counter가 바뀔 때도 레이아웃 전체에 애니메이션이 걸릴 수 있습니다.

---

4. 올바른 코드 예시

4-1. withAnimation으로 국소 적용

struct GoodAnimationView: View {
    @State private var isExpanded = false
    @State private var counter = 0

    var body: some View {
        VStack {
            Button("토글") {
                withAnimation(.easeInOut) {
                    isExpanded.toggle()      // ✅ 이 변경에만 애니메이션
                }
            }

            Button("카운트") {
                counter += 1                 // ✅ 애니메이션 없음
            }

            Text("Counter: \(counter)")

            Rectangle()
                .frame(height: isExpanded ? 200 : 50)
        }
    }
}

4-2. animation(value:)를 꼭 써야 할 때

Rectangle()
    .frame(height: isExpanded ? 200 : 50)
    .animation(.spring(), value: isExpanded)   // ✅ 이 View + 이 값에만 연결

---

5. 정리 및 팁

• 전체 뷰에 .animation(_:)를 무분별하게 붙이지 말고,
  가능하면 withAnimation 블록 안에서 특정 상태 변경에만 애니메이션을 적용합니다.
• animation(_:value:)를 사용한다면 “이 View는 이 값이 바뀔 때만 애니메이션 된다”는 식으로
  명시적 연결만 사용하는 것이 안전합니다.