[iOS] UIKit - TagFlowLayout에서 태그 중복 문제 해결하기 🔍

문제 상황 ⚠️

게시글 상세보기 화면(PostDetailVC)에서 수정 후 돌아왔을 때, 태그들이 중복으로 추가되는 현상이 발생했다.

이는 게시글을 수정하고 돌아왔을 때 viewWillAppear에서 데이터를 새로고침하면서 기존의 태그들을 제거하지 않고 새로운 태그들을 추가하기 때문이었다.

해결 방법 💡

1. TagFlowLayout에 removeAllTags 메서드 추가

먼저 TagFlowLayout 클래스에 기존 태그들을 모두 제거할 수 있는 메서드를 추가했다:

class TagFlowLayout: UIView {
    private var tags: [UIView] = []
    
    // 기존 태그들을 모두 제거하는 메서드
    func removeAllTags() {
        tags.forEach { $0.removeFromSuperview() }
        tags.removeAll()
    }
    
    // ... 기존 코드
}

2. setupTags 메서드 수정

PostDetailVC의 setupTags 메서드에서 새로운 태그를 추가하기 전에 기존 태그들을 모두 제거하도록 수정했다:

private func setupTags() {
    guard let post = post else { return }
    
    // 기존 태그들 모두 제거
    statusTagsView.removeAllTags()
    techStacksView.removeAllTags()
    projectTypeView.removeAllTags()
    
    // Position 태그 설정
    post.position.forEach { tag in
        statusTagsView.addTag(createTagView(text: tag))
    }
    
    // Tech Stack 태그 설정
    post.techStack.forEach { tag in
        techStacksView.addTag(createTagView(text: tag))
    }
    
    // 프로젝트 타입 태그 설정
    [post.ideaStatus, post.meetingStyle].forEach { tag in
        projectTypeView.addTag(createTagView(text: tag))
    }
}

결과 🎯

• 게시글 수정 후 돌아왔을 때 태그가 중복으로 추가되지 않고 정상적으로 표시된다
• 기존 태그들이 깔끔하게 제거되고 새로운 태그들만 표시된다
• UI가 더 깔끔하고 안정적으로 동작한다

회고 💭

이 문제는 데이터를 새로고침할 때 기존 UI 요소들의 정리가 필요하다는 것을 상기시켜주었다. 특히 동적으로 생성되는 UI 요소들의 경우, 새로운 요소를 추가하기 전에 기존 요소들을 정리하는 것이 중요하다.

또한 이런 cleaning 작업은 별도의 메서드로 분리하여 관리하는 것이 코드의 재사용성과 유지보수성을 높일 수 있다는 것을 배웠다.

참고 자료 📚

• UIView Documentation
• View Programming Guide for iOS