마지막 onSubmit 에러체크 문제

Question

에러체크할 때 나머지값이 없어도 submit이 되는 문제가 있습니다. setError({...error, ...e}) }}> 위 코드에서 setError update해주는 로직을 // before setError: (e) => setError({...error, ...e}) // after setError: (e) => setError(prev => ({...prev, ...e})) 아래와 같은 형식으로 바꿔주면, 리팩토링 이전과 같이 동작을 하게됩니다. batch의 문제인지, 불변성의 문제인지 정확히 모르겠네요. 설명해주시면 감사감사!

aftercamp · Answer

안녕하세요 구스타프님! 엄청 좋은 질문을 해주셨네요! batch까지 의심하셨다니 내공이 조금 있으시군요 "batch 문제일 것이다" 라는 가설을 검증하기 위해서 상태 업데이트를 순차적으로 실행하도록 해봤는데요. useInput.tsx 의 useEffect 에서 setTimeout(() => setError({ [source]: err } as PartialErrorInfo), 0); 로 변경하거나 queueMicrotask(() => setError({ [source]: err } as PartialErrorInfo)) 상태변경이 batch 로 동작하지 않도록 해도 말씀하신대로 submit 이 동작합니다. 따라서 batch 문제는 근본적인 문제가 아닌 것 같고.. 하지만 말씀하신대로 setError에 함수를 넘겨서 previous state를 사용하면 정상 동작하게 되는데, 그 이유는 useInput 의 useEffect 가 각 필드 TextField, CheckboxField 에서 독립적으로 실행됩니다. context에 넘겨주는 setError 함수 내부에선 error의 값이 모두 undefined입니다. setError: (e) => { // 3개의 각 필드에서 실행되는 시점에 error는 {name: undefined, password: undefined, confirm: undefined} setError({ ...error, ...e }); } 그래서 구체적으로 error 상태가 어떻게 업데이트가 되냐면 setError({ name: “최소 3자 이상 입력해주세요", password: undefined, confirm: undefined}) setError({ name: undefined, password: “최소 6자 이상 입력해주세요", confirm: “반드시 체크해주세요”}) setError({ name: undefined, password: undefined, confirm: “반드시 체크해주세요”}) 이 순서대로 실행되고 마지막으로 실행된 confirm 에 대한 에러만 보이게 되는 것입니다. App.tsx의 CheckboxField 컴포넌트 위치를 Password 텍스트 필드 위로 올리고 새로고침하면 마찬가지로 Password 에러만 나타나게 됩니다. 따라서 제안해주신 방법대로 previous state 를 이용해야 위와 같은 문제가 발생하지 않을 것입니다. 아무튼 이것과 관련해서 강의 내 오류가 있는 부분은 정정하도록 하겠습니다! 감사의 의미로 제 메일 주소로 morishjs@gmail.com 연락처 남겨주시면 감사의 선물을 보내드리겠습니다 🙇‍♀️