expo 업그레이드

TextInput 한글 입력 뷰 크기 관련 이슈😂

현재 하고 있는 <와글> 프로젝트에서 TextInput 한글 입력 버그 관련하여 react native를 업그레이드할 일이 생겼다. ios에서 TextInput에 한글을 입력할 때 뷰 크기 자체가 오락가락하면서 매우.. 안 예쁜..ux가 되어버린 것이다..
아래 글은 react-native 업그레이드와 관련, expo를 업그레이드하는 것을 적어내린 것이다.

expo upgrade🙂

아래는 공식문서를 참고하면서 내가 직접 해 본 결과다. 아직 eject 하지 않은 상태라서, 공식문서의 Managed workflow에 따른 튜토리얼을 따라서 했다.

npm i -g expo-cli
expo upgrade
npm i --save expo-splash-screen

expo upgrade 이후👌

warning☹️

Warning: Cannot update a component from inside the function body of a different component.
이라는 warning이 떴다.

이는 useState를 다른 컴포넌트에서 호출하면 이와 같은 메세지가 뜨고, 같은 컴포넌트 내의 useEffect() 안에서 호출하면 해결되는 문제인 듯하다.

참고: https://reactjs.org/blog/2020/02/26/react-v16.13.0.html
구체적인 해결 방법 제시: https://github.com/facebook/react/issues/18147

한글 입력 오류 해결👏

다행히도 한글 입력할 때 기존의 입력 때마다 들쭉날쭉해지는 현상은 벗어났다.
앞으로 14개의 파일에서 위의 warning 메세지에 해당하는 코드를 뜯어 고쳐야겠지만.. 일단 문제는 해결됐으니 만족한다. 기능을 더 붙이기 전에 업그레이드해서 무척 다행이라고 생각한다.