[React Native] Form Component 만들어 Screen에 적용해 보기(Apply Form Component to Screen)

안녕하세요 Foma 입니다!

 

React Native에서 Form을 만들어 해당 Screen에 정보를 전달하는 방법에 대해 정리해 보도록 하겠습니다.

 

바로 시작할게요~!

 

언어는 TypeScript, 환경은 Expo로 진행 하겠습니다!

---

AddPersonForm.tsx

 

먼저 사람을 추가하는 Form을 만들어 보겠습니다.

 

PersonFormType

 

Form에 들어갈 프로퍼티들을 정의해 줍니다.

 

export type PersonForm = {
  name: string;
  age: string;
  gender: string;
};

 

PersonProps

 

Form의 프로퍼티의 type을 정의해 줍니다.

 

제출 하였을 때 PersonForm을 파라미터로 받는 함수를 만들어 주겠습니다.

 

type PersonFormProps = {
  onSubmit: (form: PersonForm) => void;
};

 

AddPersonForm

 

AddPersonForm에 위에서 정의한 PersonFormProps를 파라미터로 작성해 줍니다.

 

export function AddPersonForm({ onSubmit }: PersonFormProps) { ...

 

formState

 

form의 상태를 저장할 useState를 만들어 줍니다.

 

  const [form, setForm] = useState({
    name: "",
    age: "",
    gender: "",
  });

 

View

 

TextInput을 이용하여 각 프로퍼티에 맞는 Input 창을 만들어 주고,

 

아래에 제출을 할 버튼인 Submit을 구현해 주고, 해당 버튼을 눌렀을 때 form 정보를 담아 onSubmit이 되도록 합니다.

 

  return (
    <View>
      <TextInput
        placeholder="name"
        style={styles.input}
        onChangeText={onChangeText("name")}
        value={form.name}
      />
      <TextInput
        placeholder="age"
        style={styles.input}
        onChangeText={onChangeText("age")}
        value={form.age}
      />
      <TextInput
        placeholder="gender"
        style={styles.input}
        onChangeText={onChangeText("gender")}
        value={form.gender}
      />
      <Button onPress={() => onSubmit(form)} title="Submit"></Button>
    </View>
  );

 

onChangeText

 

텍스트가 수정되었을 때 어떤 인풋창이 수정된 건지 prop으로 알아낸 뒤 form의 해당 프로퍼티에 value값을 설정해 줍니다.

 

  const onChangeText = (prop: string) => (value: string) => {
    setForm({
      ...form,
      [prop]: value,
    });
  };

---

AddPersonScreen.tsx

 

제출했을 때 form 정보를 alert로 띄울 handleSumit 함수를 작성해 줍니다.

 

View엔 위에서 만든 AddPersonForm 넣어주고 onSubmit이 되었을 때 handleSubmit이 실행되도록 합니다.

 

export default function AddPersonScreen() {
  const handleSubmit = (form: PersonForm) => {
    alert(`Name: ${form.name} Age: ${form.age} Gender: ${form.gender}`);
  };
  
  return (
    <View style={styles.container}>
      <AddPersonForm onSubmit={handleSubmit}></AddPersonForm>
    </View>
  );
}

---

실행 화면

 

해당 인풋창에 각 값을 입력하고 Submit 버튼을 누르면 아래와 같이 alert 창에 해당 form 정보가 띄워지는 것을 볼 수 있습니다.