[react native] textinput 입력 시 글자 유실 textinput lose focus react native

 

export default () => {
const [content, setContent] = React.useState('');


const InsertData = () => {
	return (
    	<>
        	<View>
            	<TextInput
               	   placeholder="텍스트를 입력하세요"
                    value={content}
                    onChangeText={(text) => setContent(text)}
                </>
            </View>
        </>
    )
}


	return (
    	<>
    		<View>
            	<InsertData/>
            </View>
    	</>
    )
}

이렇게 InsertData 라는 component 를 만들고

그 안에서 TextInput 에 텍스트를 입력할 때 마다

계속 쳐지는게 아니라 한글자 치면 focus 가 사라지고;;

또 클릭해서 한글자 치고... 

계속 저 InsertData() 가 rendering 되는 것이였다 (한글자 칠때마다)

 

해결방법은 InsertData 를 따로 컴포넌트로 만들어서 import 해서 사용하자

InsertData.js
export default () => {
const [content, setContent] = React.useState('');

	return (
    	<>
        	<View>
            	<TextInput
               	   placeholder="텍스트를 입력하세요"
                    value={content}
                    onChangeText={(text) => setContent(text)}
                </>
            </View>
        </>
    )
}



export default () => {
import InsertData from './InsertData'

	return (
    	<>
    		<View>
            	<InsertData/>
            </View>
    	</>
    )
}