챌린지반과제 #2 회원가입 페이지를 MVVM 패턴으로 변경하기

이전글에 이어 이번에는 챌린지반과제 2번째를 적어보자면

기존에 구현한 자기소개페이지의 회원가입 부분을 MVVM 패턴으로 구현하는 과제이다.

이름, 아이디 , 비밀번호 를 모두 입력한 후 회원가입을 클릭하면 Toast메시지로 결과를 노출하는 과제이다.

그 후 추가 과제는 4주차내용(유효성검사)이다.

 

개념을 복습하고 간단한 코드를 작성한 후 과제를 수행해서 완성까지 하루가 걸리지 않았던것 같다.

나는 먼저 폴더 2개를 생성했다. 

하나는 view 하나는 viewmodel 파일이다.

각각에는 view를 담당하는 Activity파일과 ViewModel 역할을 하는 파일을 담아놨다.

가장먼저 SignUpViewModel 클래스를 작성했다.

ViewModel은 앱의 ui관련 데이터를 저장하고 관리하는 클래스로 ui와 관련된 데이터를 처리하고 유지 관리하는 데 사용이되고, 액티비티 또는 프래그먼트와 같은 ui컨트롤러와 분리되어 있다.

먼저 MutableLiveData를 사용하여 이름(_name), 아이디(_id), 비밀번호(_password)를 저장한다.

MutableLiveData는 데이터를 변경할 수 있는 LiveData의 하위 클래스이며 이를 통해 데이터의 변경을 감지하고 UI에 알릴 수 있다.

이름(_name), 아이디(_id), 비밀번호(_password)에 대한 LiveData 속성을 선언하여 외부에서 데이터에 대한 읽기 전용 접근을 허용한다.

그 후 setName(), setId(),setPassword() 함수를 통해 각각의 데이터를 설정하고 이 함수들은 내부적으로 MutableLiveData의 값을 설정한다.

updateData() 함수를 통해 한 번에 여러 데이터를 업데이트할 수 있습니다. 이 함수를 사용하면 여러 데이터를 동시에 변경할 때 ViewModel에게 전달할 수 있다.

두 번째로 SignUpActivity 에 

viewModel을 선언했다. 이는 jetpack 라이브러리에서 제공하는 viewModels() 확장 함수를 사용하여 viewModel인스턴스를 생성한 것이다.

이유는 다음과 같다.

ViewModel의 생명주기 관리: viewModels() 함수는 활동의 생명주기와 연결된 ViewModel 인스턴스를 생성한다. 이는 화면이 회전되거나 구성 변경이 발생할 때 ViewModel이 새로 생성되는 것을 방지하여 데이터의 일관성을 유지하는 데 도움이 된다. ViewModel의 재사용: viewModels() 함수는 ViewModel 인스턴스를 생성하고 관리하기 때문에 매번 새로운 인스턴스를 생성하지 않는다. 따라서 화면 간에 ViewModel을 공유하고 데이터를 유지하며 상태를 보존하는 데 사용된다.

나는 by ViewModels를 이용했는데 

이를 이용하기 위해

라이브러리 디펜던시를 추가해줘야한다.

그래서 다음과 같이 build.gradle.kts  파일에 추가했다.

해당 디펜던시들은 공식문서를 참조했다.

• androidx.activity:activity-ktx:{version}
  • https://developer.android.com/jetpack/androidx/releases/activity?hl=ko
• androidx.fragment:fragment-ktx:{version}
  • https://developer.android.com/jetpack/androidx/releases/fragment?hl=ko

프래그먼트  |  Jetpack  |  Android Developers

그 후 다음과 같이 코딩했다.

1. 사용자가 회원가입 버튼을 클릭하면 validateFields() 메서드를 호출하여 입력된 정보의 유효성을 검사한다. 입력 필드에 대한 유효성 검사를 수행하고, 문제가 있을 경우에는 Toast 메시지를 표시하여 사용자에게 알린다.
2. 사용자 입력이 유효한 경우, updateViewModel() 메서드를 호출하여 SignUpViewModel에 사용자 정보를 업데이트한다.
3. navigateToSignUp() 메서드를 호출하여 회원가입이 성공했음을 나타내는 결과 코드와 함께 SignInActivity로 이동한다. 이때, 사용자가 입력한 정보는 Intent의 extra로 실려서 전달된다.

이렇게 구현된 SignUpActivity는 사용자가 회원가입을 할 수 있는 화면을 제공하고, 입력된 정보를 ViewModel에 전달하여 관리한다.

 

[SignUpActivity.kt]

그 후 SignInActivity.kt파일도 작성하였다.

1. viewModels() 함수를 사용하여 SignUpViewModel의 인스턴스를 생성하고 이를 viewModel 변수에 할당한다. 이렇게 함으로써 ViewModel의 생명주기를 액티비티와 연결하고 ViewModel을 사용하여 데이터를 관리할 수 있다.
2. viewModel에서 관찰 가능한 LiveData를 통해 회원가입 화면에서 입력한 데이터를 관찰한다. 이 데이터는 이름, 아이디, 비밀번호에 해당한다. 데이터가 변경되면 해당하는 EditText에 해당 데이터를 설정하여 사용자가 입력한 내용을 보여준다.
3. 회원가입 버튼을 클릭하면 resultLauncher를 사용하여 회원가입 화면으로 이동한다. 이 때, registerForActivityResult() 함수를 사용하여 회원가입 화면에서 전달된 데이터를 처리한다.
4. 회원가입 화면에서 전달된 데이터를 ViewModel의 updateData() 함수를 통해 업데이트하고, 화면에 Toast 메시지를 통해 사용자에게 전달된 데이터를 보여준다.
5. 사용자가 모든 필드를 입력하고 로그인 버튼을 클릭하면, 입력된 아이디를 HomeActivity로 전달하여 로그인을 수행한다.

이렇게 구현된 SignInActivity는 사용자가 로그인을 시도할 때 필요한 기능을 제공하고, 회원가입 화면에서 입력한 데이터를 처리하여 로그인 화면에 반영한다.

아직 진짜 데이터를 이용하지 않고 String으로 일일이 받아서 처리했지만 추 후에 데이터 Model클래스를 작성해서 db에 직접 연결해서 만들어보고 싶다.