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이 전혀 반영되지 않는다

 

1번째 항목을 지웠다 > todoItem업데이트!

useState로 초기화한 updateText는 업데이트된 todoItem이 아닌 처음에 할당받은 값을 계속 가지고 있는다

 

props를 useState에 할당하면 안되는 이유

useState는 최초 한번만 호출되기 때문에 부모 컴포넌트로부터 받은 props가 변경된다고 하더라도 처음 할당된 state 값은 변하지 않기 때문이다.

 

해결법 : useEffect를 사용해서 props로 받아온 값이 변경될 때마다 setState를 호출한다.

const [updateText, setUpdateText] = useState(todoItem.title)
//props값인 todoItem가 변경될 때마다 updateText도 변경된 값으로 업데이트!
useEffect(()=>{
    setUpdateText(todoItem.title)
},[todoItem])

 

 

 

(참고)

 

https://se9round.dev/post/props%EB%A5%BC%20useState%EC%9D%98%20%EC%B4%88%EA%B8%B0%EA%B0%92%EC%9C%BC%EB%A1%9C%20%EC%82%AC%EC%9A%A9%20%ED%95%A0%20%EB%95%8C%20%EC%A3%BC%EC%9D%98%EC%A0%90

props를 useState의 초기값으로 사용 할 때 주의점