이슈
안드로이드 실제 기기에 앱을 설치하고 테스트했을 때 한글 깨짐 현상이 발생했다. 시뮬레이터 상에서는 발생하지 않는 문제였기에 실제 기기 USB를 연결해 디버그 작업을 수행했다.
해결 방법
테스트에서 글자가 깨지는 화면과 깨지지 않는 화면 모두 존재했다. 두 화면의 소스 코드를 비교해보면 문제점을 찾고 해결 방안을 모색했다. 디버그 과정에서 Recoil이 TextInput에서 사용되었을 때 나타난다는 것을 발견했다. 그래서 Recoil을 useState를 변경해서 TextInput에서 사용을 했고 다른 화면으로 넘어갈 때 useState에 저장된 정보를 Recoil에 저장하는 방식으로 해결했다.
이슈 수정 코드 예시
1. 수정 전 코드
const [userName, setUserName] = useRecoilState(userState);
const submit = () => {
navigation.goBack();
}
return(
<TextInput
style={styles.input}
value={userName}
onChange=(name => setUser(name))
/>
<Button onPress={submit}/>
)
2. 수정 이후 코드
const [userName, setUserName] = useState<String | undefined>(undefined);
const [recoilUserName, setReocilUserName] = useRecoilState(userState);
const submit = () => {
setUserName(userName)
navigation.goBack();
}
return(
<TextInput
style={styles.input}
value={userName}
onChange=(name => setUserName(name))
/>
<Button onPress={submit}/>
)
마무리
문제가 되는 화면에서 모두 Recoil 부분을 State로 변경했다. 변경 후 실제 기기 테스트에서 모든 화면이 정상적으로 한글이 써지는 것을 확인했다. 외부 라이브러리를 가져다가 사용할 경우 생길 수 있는 문제를 경험할 수 있었다는 것이 좋았다. 코드를 작성할 때 외부 라이브러리 100% 신뢰를 해서는 안된다는 걸 다시 상기할 수 있었다.
'트러블슈팅' 카테고리의 다른 글
[ 인생퍼즐 ] RN Navigation 화면 남는 문제 (0) | 2022.08.22 |
---|---|
[RN] Android Permission "never_ask_again"일 때 권한 허락 (0) | 2022.04.10 |
[RN] React Native Recording Player stopReocrder 메서드 동작 문제 (0) | 2022.03.21 |
Carla Simulator Nav(format - bin) 파일 생성 방법 (0) | 2022.03.02 |