fix(login): 로그인 창에서 키보드 깜빡이는 문제 해결

개요

- 로그인 창에서 이메일을 치면, 키보드의 자동 암호 부분이 깜빡 거리
- 조사결과, iPhone 14 + iOS 17에 한정해서 발생하는 에러

수정 사항

- 원인은 iPhone 14 + iOS 17에 있다는 조사결과
- 이를 해결하기 위해, 기존에 이메일 값이 계속 변경되어 재렌더링 되는
부분과 겹쳐서 더 심해보였음
- Controlled 컴포넌트를 사용하면서, email 값 관련 재렌더링이 계속 반복되면서 더
심해보였음.
- 따라서, useRef를 통해, 이메일란을 Uncontrolled Component으로 바꾼다
- 추가로 autoCorrect=false로 두어 키보드의 수정을 최소화한다.

참고

- facebook/react-native#39411

- https://dori-coding.tistory.com/entry/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Controlled-Component%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Uncontrolled-Component

src/pages/login/LoginPage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
 	View,
 	Text,
@@ -35,7 +35,7 @@ const LoginPage = () => {
 
 	const navigation = useNavigation();
 
-	const [valueID, setEmail] = useState("");
+	const emailRef = useRef("");
 	const [valuePW, setPassword] = useState("");
 	const [showPW, setShowPW] = useState(false);
 	const { updateOnboardingData } = useOnboarding();
@@ -61,7 +61,7 @@ const LoginPage = () => {
 	};
 
 	const handleEmail = (text) => {
-		setEmail(text);
+		emailRef.val = text;
 		setLoginFailed(false);
 	};
 
@@ -72,7 +72,7 @@ const LoginPage = () => {
 
 	const handleLogin = async () => {
 		try {
-			const loginResponse = await login(valueID, valuePW);
+			const loginResponse = await login(emailRef.val, valuePW);
 			const id = loginResponse.data.member_id;
 			const accessToken = loginResponse.data.accessToken;
 			const refreshToken = loginResponse.data.refreshToken;
@@ -131,16 +131,16 @@ const LoginPage = () => {
 
 	useEffect(() => {
 		if (isMockLoginEnabled) {
-			setEmail(mockEmail);
+			emailRef.val = mockEmail;
 			setPassword(mockPassword);
 		}
 	}, []);
 
 	useEffect(() => {
-		if (isMockLoginEnabled && valueID && valuePW) {
+		if (isMockLoginEnabled && emailRef.val && valuePW) {
 			handleLogin();
 		}
-	}, [valueID, valuePW]);
+	}, [valuePW]);
 
 	return (
 		<TouchableWithoutFeedback onPress={handleKeyboard}>
@@ -153,6 +153,7 @@ const LoginPage = () => {
 				<View style={LoginStyles.containerIdPw}>
 					<Text style={LoginStyles.textIdPw}>ID (Email Address)</Text>
 					<TextInput
+						ref={emailRef}
 						style={
 							loginFailed
 								? [
@@ -162,8 +163,8 @@ const LoginPage = () => {
 								: LoginStyles.textInputIdPw
 						}
 						placeholder={t("placeholderEmail")}
+						autoCorrect={false}
 						onChangeText={(text) => handleEmail(text)}
-						value={valueID}
 					/>
 					<Text style={LoginStyles.textIdPw}>Password</Text>
 					<View style={LoginStyles.textInputPwContainer}>