[TIL / 25.02.21] SkeletonView 적용 및 생명주기 관련 문제 해결

1. 오늘 진행한 작업

 

전체적으로 데이터가 로드되어 나오는 페이지에 대해선 스켈레톤뷰를 입히기로 결정했다.

 

SkeletonView란 데이터가 로드 되는 등 페이지 로딩 상황에 애니메이션을 제공함으로써 사용자에게 진행되고 있음을 느끼게 해줄 수 있도록 하는 뷰다. 

 

이를 구현하려면 SkeletonView라는 라이브러리를 설치해 사용해야 한다.

 

사용법을 간단히 말하자면,

• import SkeletonView 를 통해 스켈레톤뷰를 사용하는 모듈에 임포트해주고
• 스켈레톤뷰를 적용하고자 하는 뷰에 사용가능하도록 설정 -> 보여주고자 하는 타이밍에 show -> 데이터 로드 완료되거나 스켈레톤 뷰를 끄고 싶을 때 hide

2. 겪었던 문제와 해결

 

테이블뷰의 모든 요소에 스켈레톤뷰를 적용했음에도 헤더 영역에는 적용되지 않는 문제가 있었다.

이를 해결해보고자 시도했던 게

생명주기를 바꿔 viewWillAppear로 시도, 테이블뷰 헤더 설정 하는 파트에서 show 메서드 호출

 

첫번째는 결과가 다를 바 없었고, 두번째는 스켈레톤이 없어지자마자 다시 생기는 문제가 있었다.

 

계속 이것저것 만져보다가 혹시 headerView를 찾지 못하는 것인지에 대해 로그를 찍어보도록 했다.

 

if let headerView = homeView.homeTableView.headerView(forSection: 0) as? HomeTableViewHeaderView {
            print("HeaderView 존재함")
            headerView.showHeaderViewSkeletons()
        } else {
            print("HeaderView 없음")
        }

 

디버깅 후 헤더뷰를 찾지 못한다는 점을 찾았고, 클로드를 통해 들은게 초기 영역이 오토레이아웃의 문제로 제대로 잡히지 않아 인식을 못하는 거일수도 있다는 말을 듣고 고쳐 시도해보았으나 해결되지 않음.

 

결국, 찾은 문제가 레이아웃을 잡기도 전에 viewWillAppear이 호출되어 헤더뷰를 찾지 못한다는 것.

따라서 viewWillAppear에서가 아닌 서브뷰 등록 및 레이아웃 설정이 끝나고 호출할 수 있게

 

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        // 테이블뷰 스켈레톤 표시 전에 헤더뷰 스켈레톤 먼저 표시
        if let headerView = homeView.homeTableView.headerView(forSection: 0) as? HomeTableViewHeaderView {
            print("HeaderView 존재함")
            headerView.showHeaderViewSkeletons()
        } else {
            print("HeaderView 없음")
        }
        
        // 그 다음 테이블뷰 스켈레톤 표시
        homeView.homeTableView.showAnimatedGradientSkeleton()
        
        // 3초 후 제거 (테스트용)
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) { [weak self] in
            self?.homeView.homeTableView.hideSkeleton()
            
            if let headerView = self?.homeView.homeTableView.headerView(forSection: 0) as? HomeTableViewHeaderView {
                headerView.hideHeaderViewSkeletons()
            }
        }
    }

 

해당 메서드를 오버라이드해 해결했다.

 

---

보통 생명주기를 통해 데이터를 바인딩한다던지 다루는 편이었는데 viewDidLayoutSubviews에 대한 부분을 사용해본 적이 없다.

사실 레이아웃 설정을 해두어도 뷰를 메모리에 올리고 레이아웃 관련 설정하는 처리들이 곧바로 이뤄지지 않고 순차적으로 이루어질텐데 이러한 작은 타이밍 하나하나 세세히 고려할 줄 알아야 더 매끄럽게 개발할 수 있을 것 같다.

 

SkeletonView에 대해 기초적인 설정만 해두었고, 문제 해결에 초점을 맞춰 세세하게 구현해내지 못했는데 다음 작업 때 포스트에서 다루도록 하겠다 !