여기서 createChangeTextHandler 함수는 form 객체에서 원하는 키를 업데이트해주는 함수를 반환합니다. 그래서 BorderedInput에서 onChangeText={createChangeTextHandler('email')}과 같은 형식으로 사용할 수 있죠. 물론 다음과 같이 구현해도 전혀 문제가 되지 않습니다.

const onChangeText = ({ name, text }) => {
  setForm({...form, [name]: text});
}

<BorderedInput
  hasMarginBottom
  placeholder="이메일"
  value={form.email}
  onChangeText={(text) => onChangeText({ name: 'email', text })}
/>

여러분이 원하는 형태로 코드를 작성하면 됩니다. 앞으로의 예시에서는 우리가 처음 구현한 방식인 createChangeTextHandler를 사용하겠습니다.

onSubmit에서는 키보드를 닫고 현재 form 상태를 콘솔에 출력하도록 구현했습니다. 추후에는 isSignUp 값을 사용해 상황에 따라 로그인 또는 회원가입 작업을 하도록 구현하겠습니다.

인풋에 내용을 입력한 후 로그인 또는 회원가입 버튼을 눌러보세요. 콘솔에 다음과 같은 형식으로 잘 출력되나요?

{"confirmPassword": "", "email": "reactnative@gmail.com", "password": "123123"}
{"confirmPassword": "123123", "email": "reactnative@gmail.com", "password": "123123"}