Frontend 개발자 - hyo.loui
리액트 네이티브 - 'Todo-List' 수정 버튼 클릭 시 이전값이 계속 나오는 오류 본문
❤️🔥TIL : Today I Learned
🤢 문제 내용 :
위 영상처럼 수정 버튼을 클릭하고 수정을 한 후,
다른 투두에서도 이전에 수정했던 내용이 고스란히 남아있는 문제였다
🎈 문제 해결 과정 :
우선 코드부터 보자
수정 버튼을 클릭했을 때, 나타나는 태그이다
저 값에서 value가 editText 라는 state를 가지고 있었다..
onSubmitEditing 속성의 updateTodo라는 함수안에서
editText를 다시 setState로 바뀐 값으로 넘겨줄 수 있었다,
하지만, 더 간단하게
defaultValue 라는 것을 통해 처음 보여줄 값만 정해줬다.
수정하는 역할의 특성상 보여질 텍스트는 1회성이기 때문이다
input 태그에 기본값으로 가지고있는 속성으로 붙여줬고,
editText를 다시 건들여줘야하는 불편함 때문에
todo.text를 넘기는 방식을 사용했다
왜냐, 어차피 updateTodo 함수가 실행되면 todo의 text값이 변하기 때문에
훨씬 간결해지고 효율적으로 코드를 작성할 수 있었다.
✨ 알게된 것
- state로 받지 않아도 되는, 고정값이 되는 부분은 데이터의 내용으로 채워주는게 효과적이다
value와 defaultValue의 차이점
- defaultValue: input tag에서 처음 보여줄 값
- value: input tag에서 계속 보여줄 값
'React-Navtive' 카테고리의 다른 글
리액트 네이티브 - CRUD: Update API (updateDoc( ) 활용하기) (0) | 2023.01.03 |
---|---|
리액트 네이티브 - CRUD: Read API (useEffect와 onSnapshot 활용하기) (4) | 2023.01.02 |
리액트 네이티브 - CRUD: Create API, Firebase 연결하기 (1) | 2023.01.02 |
리액트 네이티브 - Todo-List, setState 제대로 하기(해결) (0) | 2022.12.30 |
리액트 네이티브 - 새로운 프로젝트 만들기 (expo), 에러 해결 (0) | 2022.12.30 |