일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- mainapplication.kt
- err_connection_refused
- TS
- Spring
- set
- npm에러
- 배열중복요소제거
- generic
- materialicons
- forwardref type
- 안드로이드빌드에러
- array
- javascript
- app.post
- 슬라이딩윈도우
- 상속
- app:compiledebugkotlin
- reactnative
- react
- 스크롤이벤트
- 이진탐색
- map
- Next.js
- 타입스크립트
- 리액트네이티브아이콘
- reactnative error
- Filter
- interface
- async
- extends
- Today
- Total
rhanziy
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 Native' 카테고리의 다른 글
React Native - 무한스크롤 useInfiniteQuery와 FlatList (typescript) (0) | 2023.11.20 |
---|---|
React Native - 에러해결 invalid hook call error(feat.카카오로그인) (1) | 2023.11.03 |
React Native - AsyncStorage, Alert (0) | 2023.10.10 |
React Native - TextInput component (0) | 2023.10.10 |
React Native - Touchable/Pressable component (0) | 2023.10.10 |