Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- useState
- merge
- redux
- async
- rebase
- 가상회선교환
- 웹
- typescript
- CSS
- await
- react
- Kotlin
- hot Reloading
- 자동반영
- list
- 리액트
- Git
- javascript
- 리사이클러뷰
- 비동기처리
- createPortal
- useCallback
- php문법
- pull
- 리덕스
- list.map
- equalityFn
- 공부
- 컬러구성
- 리액트를 다루는 기술
Archives
- Today
- Total
공부블로그
Props를 useState의 초기값으로 넣었을 때의 문제 본문
이거땜에 ㄹㅇ 하루종일 삽질을 해버렷다...
todo list에서 분명 항목을 삭제했는데 수정하려고 클릭하면 계속 다른 값이 나오는 문제였다....왜냐면 코드가 이랫기 때문...
//props로 받은 todoItem
const Item = ({ todoItem, index } : Props) => {
...
const [updateText, setUpdateText] = useState(todoItem.title)
console.log('todoItem,title : ',todoItem.title )
console.log('updateText : ',updateText)
}
변경된 todoItem이 전혀 반영되지 않는다
props를 useState에 할당하면 안되는 이유
useState는 최초 한번만 호출되기 때문에 부모 컴포넌트로부터 받은 props가 변경된다고 하더라도 처음 할당된 state 값은 변하지 않기 때문이다.
해결법 : useEffect를 사용해서 props로 받아온 값이 변경될 때마다 setState를 호출한다.
const [updateText, setUpdateText] = useState(todoItem.title)
//props값인 todoItem가 변경될 때마다 updateText도 변경된 값으로 업데이트!
useEffect(()=>{
setUpdateText(todoItem.title)
},[todoItem])
(참고)
'리액트 > 리액트 공부' 카테고리의 다른 글
Recoil 상태 관리 라이브러리 (0) | 2022.09.20 |
---|---|
리덕스 미들웨어 redux-thunk (0) | 2022.09.19 |
리덕스 (with typesafe-actions) (1) | 2022.09.19 |
리액트 진짜 초급 강의 (0) | 2022.04.14 |
리액트 Router DOM 사용하기 (0) | 2021.08.01 |