[React Native] 함수형 컴포넌트 props 데이터에 따라 업데이트 해주기(Functional Component update on props change)

안녕하세요 Foma 입니다.

 

오늘은 함수형 컴포넌트에서 props가 바뀔 때마다 화면이 업데이트 되도록 하는 기능을 구현해 보도록 하겠습니다.

 

바로 시작할게요~

---

Problem

 

아래와 같이 추가 버튼을 누르거나 수정 버튼이 눌리면 폼 형식의 모달이 뜨도록 구현 했습니다.

 

 

위 과정에서 수정 버튼을 눌렀을 땐 해당 버튼이 눌린 데이터 모델의 값이 인풋 안에 미리 작성돼도록 하고, 추가 버튼이 눌렸을 땐 빈 인풋창이 보이도록 구현하고 싶었습니다.

 

왼쪽이 추가(+) 버튼을 눌렀을 때, 오른쪽이 수정버튼을 눌렀을 때입니다.

 

---

TodoList.tsx

 

위 리스트 화면에서 useState를 구현해 줍니다.

 

  const [todos, setTodos] = useState(todoDatas);
  const [todo, setTodo] = useState<TodoModel>({
    author: '',
    title: '',
    content: '',
    priority: -1,
  });
  const [editIndex, setEditIndex] = useState(-1);

 

수정 버튼이 눌리면 아래와 같은 알림창이 뜨도록 구현하고,

 

 

OK 버튼이 눌리면 수정 버튼이 눌린 리스트의 아이템의 인덱스를 파라미터로 받아 아래와 같이 상태를 세팅해 줬습니다.

 

  const showEditAlert = (index: number) => {
    Alert.alert(
      'Edit',
      'Do you want to edit?',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed!'),
        },
        {
          text: 'OK',
          onPress: () => {
            setEditIndex(index);
            setTodo(todos[index]);
            setModalVisible(true);
          },
        },
      ],
      {cancelable: false},
    );
  };

 

만약 추가(+) 버튼이 눌렸다면 빈 데이터가 전달 되도록 구현 했습니다.

 

  const handlePlus = () => {
    setTodo({author: '', title: '', content: '', priority: -1});
    setModalVisible(true);
  };

 

그 다음 커스텀 모달인 AddModal에 프로퍼티에 todo로 오브젝트를 전달해 주었습니다.

 

  return (
    <View>
      ...
      <AddModal
        isModalVisible={isModalVisible}
        handleClose={handleClose}
        handleSubmit={handleSubmit}
        todo={todo}></AddModal>
      ...

---

 

AddModal.tsx

 

프로퍼티를 정의해 줍니다.

 

interface AddModalProps {
  isModalVisible: boolean;
  todo: TodoModel;
  handleClose: () => {};
  handleSubmit: () => {};
}

 

함수형 컴포넌트의 프로퍼티로 AddModalProps로 정의해 주고, todo 모델을 저장할 useState를 만들고

 

useEffect를 사용하여 props가 바뀔 때마다 todo를 props의 todo로 바뀌도록 구현했습니다.

 

const AddModal: React.FC<AddModalProps> = props => {
  const [todo, setTodo] = useState<TodoModel>({
    author: '',
    title: '',
    content: '',
    priority: -1,
  });

  useEffect(() => {
    setTodo(props.todo);
  }, [props]);

 

그 다음 모달 안의 TextInput에 value로 todo의 프로퍼티를 넣으면 수정 버튼이 눌리면 해당 모델에 맞는 데이터가 인풋 창 안에 입력되게 됩니다.

 

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