7:07 질문있습니다

Question

set 하는 부분에서   setTodoData((prev) => [...prev, newTodo]); setTodoData([...todoData, newTodo]);   첫번째 줄처럼 작성하는 것과 두번째 줄 처럼 작성하는 것의 차이점이 궁금합니다.

John Ahn · Answer

안녕하세요!!!  좋은 질문 감사합니다.  const validate1 = ( e ) => { e . preventDefault () ; setForm ( ( prevState ) => ( { ... prevState , long : form . password . length >= 3 ? true : false } )) ; setForm ( ( prevState ) => ( { ... prevState , username : " ***** " } )) ; }; const validate2 = ( e ) => { e . preventDefault () ; setForm ( { ... form , long : form . password . length >= 3 ? true : false } ) ; setForm ( { ... form , username : " ***** " } ) ; }; React 문서에서 따르면 다음 상태가 현재 상태에 따라 달라지면 대신 업데이터 함수 형식을 사용하는 것이 좋다고 나옵니다. validate1 함수와 validate2 함수가 같아보이지만 실은 validate2는 작동하지 않고  validate1만 작동하게 됩니다.  왜냐하면 setForm에 대한 두 번째 호출은 이전 setForm 호출 상태에 의존하고 업데이터 함수 양식이 사용되는 경우 상태가 최신 상태가 되기 때문입니다. 의존적인 부분이 없다면 그냥 state를 가져와도 되지만 위에 같이 의존적인 부분이 있을 때에는  업데이터 함수형식을 사용해서 구현해주세요 ~  여기에 굉장히 잘 설명되어있어서 여기도 참고해주시면 좋겠습니다 ^^   https://stackoverflow.com/questions/63541820/react-usestate-hook-when-to-use-previous-state-when-updating-state

jinhuiKim · Answer

매우 상세한 답변 감사드립니다!!