[react-native] onChange vs onChangeText

리액트 네이티브의 TextInput 컴포넌트의 프롭스 타입에 onChange와 onChangeText에 대해 간략히 정리한 글

👉 onChange

onChange 프롭스에 바인딩될 콜백함수는 텍스트 입력이 변경될때마다 호출된다. 이 콜백함수는 하나의 이벤트 객체를 받는데 이 nativeEvent 에는 텍스트 입력 정보 외에도 다양한 정보가 포함되어있다! (리액트에서 사용하던것처럼 사용하면된다)

<TextInput
  onChange={(event) => {
    const {text} = event.nativeEvent;
    console.log(text);
  }}
/>

👉 onChangeText

텍스트 입력이 변경될때마다 콜백함수가 호출된다는것은 onChange와 동일하지만, onChangeText는 onChange와 달리 nativeEvent 객체 대신 변경된 텍스트 값 자체를 직접 인자로 받는다.

<TextInput
  onChangeText={(text) => {
    console.log(text);
  }}
/>

👉 TextInput 컴포넌트 props에 대한 react native 공식문서

reference

• https://reactnative.dev/docs/textinput#onchange