[React Native] TextInput과 Object를 useState로 바인딩 하는 법 (Binding a textinput with object)

안녕하세요 Foma 입니다.

 

오늘은 TextInput 값에 따라 Object의 특정 프로퍼티 값이 바뀌는 것을 useState를 이용하여 구현하는 방법에 대해 정리해 보려고 합니다.

 

바로 시작할게요~

---

To do list

 

Todolist의 모델인 TodoModel이 있습니다.

 

interface TodoModel {
  id: number;
  author: string;
  title: string;
  content: string;
  priority: number;
}

 

해당 Form의 인풋값에 따라 해당하는 TodoModel의 프로퍼티가 바뀌는 것을 구현하고 싶었는데요.

 

 

 

1.  useState를 통해 TodoModel을 초기화 해줍니다.

 

  const [todo, setTodo] = useState<TodoModel>({
    author: '',
    title: '',
    content: '',
    priority: 0,
  });

 

2. input 값이 변화할 때 핸들링 하는 함수를 작성해 줍니다.

 

key와 value 파라미터로 받게 되는데 key는 TodoModel의 프로퍼티 이름, value는 해당 프로퍼티 값으로 새롭게 지정할 값을 의미합니다.

 

그 다음 ...prevState를 이용하여 기존의 프로퍼티 값을 유지하며, 해당 프로퍼티 값을 변경합니다.

 

  const handleInputChange = (key: string, value: string) => {
    setTodo(prevState => ({
      ...prevState,
      [key]: value,
    }));
  };

 

3. TextInput의 onChangeText 메서드에 위 함수를 바인딩 해줍니다.

 

onChangeText를 통해 작성된 텍스트 값을 불러오고 해당 TextInput의 프로퍼티와 함께 handleInputChange에 전달해 줍니다.

 

          <TextInput
            value={todo.author}
            onChangeText={text => {
              handleInputChange('author', text);
            }}
            style={styles.input}
            placeholder="author"></TextInput>

 

 

위와 같이 작성하고 todo 모델이 제대로 바뀌었는지 테스트 해주면

 

            <Pressable onPress={() => console.log(todo)}>
              <Text style={styles.button}> Submit </Text>
            </Pressable>

 

아래와 같이 TextInput 값을 작성해 주고 Submit 버튼을 누르면

 

 

TextInput  내용대로 TodoModel 값이 출력되는 것을 볼 수 있습니다.