[React-Native] useState를 통해 TextInput 사용시 키보드 error

React Native를 사용하다 보면 TextInput은 정말 자주 사용하는 component이다. 그런데 TextInput의 value, onChangeValue를 useState를 통해 상태관리를 하다보면 keyboard error가 생기곤한다. 한글자 타이핑 할때마다 focus가 해제되고 keyboard가 사라지는 오류이다.

우선 예시를 보자,

import React, { useState } from "react";
import { View, TextInput } from "react-native";

export default function App() {
  const [value, onChage] = useState("test")
    
  return(
    <View>
      <TextInput
        value={value]
        onChangeText={(text) => {onChange(text)}}
      />
    </View>
  )

다음 처럼 코드를 짰을때 오류가 나오지않지만 오류가 나온다는 가정하에 해결방법은 정말 간단하다!

바로 위 TextInput을 component화 시키는것이다.

// InputComponent.js
import React, { useState } from "react";
import { View, TextInput } from "react-native";

export default function InputComponent() {
  const [value, onChange] = useState("test");

  return (
    <View>
      <TextInput
        value={value}
        onChangeText={(text) => {
          onChange(text);
        }}
      />
    </View>
  );
}

// App.js
import React from "react";
import { View } from "react-native"
import InputComponent from "./InputComponent.js"

export default function App() {
  return(
    <View>
      <InputComponent />
    </View>
  )
}

 

이상!

codepam2020@gamil.com