React Native - edit기능 구현 중 too many re-renders(에러)

하.. . . . .. .. ......

 

ToDo 만들면서... 작성한 리스트의 edit 버튼을 누르면 onPress 함수에 의해 해당 key의 isEdit 값을 반전시키고(boolean)

isEdit가 true 면 text로 보이던 value값을 TextInput 태그를 통해 수정할 수 있게 기능을 개발하려고 했음...

 

<TouchableOpacity 
    onPress={isEditMode(key)} 
    activeOpacity={0.5} 
    style={{marginRight:10}}
  >
    <MaterialIcons name="mode-edit" size={18} color={theme.gray} />
</TouchableOpacity>



{
  toDos[key].isEdit === true ? 
  <TextInput 
    onSubmitEditing={editToDo(key)}
    placeholder={toDos[key].text}
    value={editText}
    style={styles.editInput}
    returnKeyType='done'
    onChangeText={onEditText}
  />
  :
  <Text
    style={toDos[key].completed ? styles.comText : styles.toDoText}
  >{toDos[key].text}</Text>
}

 

ERROR  Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

ERROR   Warning: Failed prop type: Invalid prop `onSubmitEditing` of type `object` supplied to `TextInput`, expected `function`.

 

근데 이 에러들이 계속 뜨는거 ㅜㅜ onSubmitEditing 함수는 submit 누르지도 않았는데 날라가서 계속 저장되고.... 미치고 팔짞뜀.

 

구글링 해보니 렌더 과정에서 state를 변화하는 함수가 있다면 리랜더링이 계속 일어나면서 발생하는 에러임을 알아냈다.

리렌더링될때 계속 실행된 것임.!!

 

 

해결책은 간단했다. 화살표함수 써주면댐 ㅠ 함수호출을 이벤트 리스너에 대한 콜백으로 호출하여 작업이 발생할 때까지 함수가 실행되지 않도록 해야한다.

onSubmitEditing = { editToDo(key) }  👉  onSubmitEditing = { () => editToDo(key) }

onPress = { isEditMode(key) } 👉  onPress = { () =>  isEditMode(key) }

 

추가로 props로 전달해 주는 함수는 useCallback()으로 감싸 주는 것이 성능 최적화에 도움이 된다고 한다. 하단에 참고 사이트를 보면 useCallback(), useMemo()에 대한 상세한 설명이 나와있다.

 

https://hyeok999.github.io/2019/12/30/react-study-11/

React 스터디 11