[ 인생퍼즐 ] 안드로이드 Recoil 사용할 때 글자 깨짐

이슈

안드로이드 실제 기기에 앱을 설치하고 테스트했을 때 한글 깨짐 현상이 발생했다. 시뮬레이터 상에서는 발생하지 않는 문제였기에 실제 기기 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% 신뢰를 해서는 안된다는 걸 다시 상기할 수 있었다.