[Mission] 닉 9주차 미션

[Nick9417]

📌 PR 제목

해당 pr에 대한 내용을 요약해주세요

#️⃣ 연관된 이슈

closes #92

✅ 변경 사항

이번 PR에서 변경된 내용을 간략히 정리해주세요.

• 마이페이지 UI 전부 구현하기
• 서버에서 데이터를 받아와서 마이페이지 연결하기
• 마이페이지 팔로잉 리스트 구현하기

📷 영상 및 스크린샷

🔗 알게 된 사항

compose에서 비동기 작업을 하는 방식과 다양한 추가 요소 alterDialog 등을 알 수 있었습니다.

📝 질문 사항

compose에서 ViewModel을 사용하는 방법에 대해 알고 싶습니다. 이번에는 잘 몰라서 제 2의 뇌를 참고했습니다

[hw4nx02]

9주차 피드백

안녕하세요 닉🦊! 축제 지나고 기말 시즌이 왔네요... 기말도 화이팅이고 시험 끝나고 봅시다!

총평

UI를 presentation 레이어로 깔끔하게 분리하였으며, ProfileViewModel을 도입하여 비동기 데이터 로딩 로직을 UI와 분리하려는 시도가 돋보입니다.

리뷰

Good!

1. ViewModel을 통한 비동기 데이터 로딩 및 상태 관리

init { load() } 블록 내에서 viewModelScope.launch를 통해 repo.loadUsers()를 호출하고, 결과를 MutableStateFlow인 _uiState로 업데이트하고 있습니다. 이를 통해 비동기 네트워크 호출을 컴포저블 본문이 아닌 ViewModel의 viewModelScope에서 처리함으로써, Recomposition 시마다 불필요하게 API가 중복 호출되는 부작용(Side Effect)을 방지하신 것이 눈에 띕니다.

To Improve

1. HorizontalPager의 pageCount 설정 및 targetPage 활용 확인

• 관련 파일: Nick/Nike_compose/app/src/main/java/com/clone/nike_compose/presentation/profile/ProfileScreen.kt
• 근거: HorizontalPager와 rememberPagerState가 사용되고 있습니다.
• 피드백: HorizontalPager를 사용할 때 rememberPagerState(pageCount = { ... })와 같이 람다 형식으로 pageCount를 전달해야 데이터가 비동기적으로 로드되기 전에 0으로 고정되는 문제를 방지할 수 있습니다. 또한, 탭 인디케이터 연동 시 pagerState.currentPage 대신 pagerState.targetPage를 사용하면 스와이프 도중 인디케이터가 부자연스럽게 끊기는 현상을 방지하고 부드러운 애니메이션을 제공할 수 있습니다.

답변

compose에서 ViewModel을 사용하는 방법에 대해 알고 싶습니다. 이번에는 잘 몰라서 제 2의 뇌를 참고했습니다
Compose에서 ViewModel을 사용하는 방법은 다음과 같습니다.

1. 의존성 추가: androidx.lifecycle:lifecycle-viewmodel-compose 라이브러리를 사용하면 컴포저블 내에서 viewModel() 헬퍼 함수를 사용할 수 있습니다.

이번 코드에서 val vm: ProfileViewModel = viewModel() 형태로 아주 잘 사용하셨습니다.

2. 상태 관찰: ViewModel의 StateFlow를 컴포저블에서 관찰할 때는 collectAsState() 또는 collectAsStateWithLifecycle()을 사용합니다. 수명 주기를 인식하여 백그라운드 상태일 때 리소스를 절약해 주는 collectAsStateWithLifecycle() 사용을 권장합니다.
3. 상태 호이스팅: 화면의 최상위 컴포저블(Screen 단위)에서만 ViewModel을 참조하고, 하위 컴포저블에는 필요한 데이터 상태와 이벤트 콜백(람다)만 전달하는 구조가 재사용성과 테스트 용이성 측면에서 가장 바람직합니다. 현재 ProfileScreen에서 ProfileScreenContent로 상태를 분리하여 전달한 방식이 이 원칙을 잘 따르고 있습니다.
   +) Hilt 사용: Hilt 라이브러리를 사용하면 @hiltviewmodel을 사용하여 Repository나 UseCase를 ViewModel에서 쉽게 주입받아 사용할 수 있습니다. 또한, Hilt를 통해 생명주기를 안전하게 관리할 수 있다는 장점도 있습니다.

@HiltViewModel
class HomeViewModel @Inject constructor(
    private val onboardingRepository: OnboardingRepository, // Repository가 생성 시 뭐가 필요한 지 몰라도 됨
    private val homeRepository: HomeRepository
) { ... }