마지막 onSubmit 에러체크 문제

에러체크할 때 나머지값이 없어도 submit이 되는 문제가 있습니다.

<InfoContext.Provider value={{ value: info, setValue: setInfo, error, setError: (e) => setError({...error, ...e}) }}>
      <Form onSubmit={onSubmit}>
        <TextField
          source="name"
          label="이름"
          validate={[minLength(3), maxLength(6)]}
        />
        <TextField
          source="password"
          label="패스워드"
          validate={[minLength(6), maxLength(12)]}
        />
        <CheckboxField
          source="confirm"
          label="위 내용이 제출됩니다 동의하십니까?"
          validate={[checked]}
        />
      </Form>
    </InfoContext.Provider>

위 코드에서 setError update해주는 로직을

// before
setError: (e) => setError({...error, ...e})

// after
setError: (e) => setError(prev => ({...prev, ...e}))

아래와 같은 형식으로 바꿔주면, 리팩토링 이전과 같이 동작을 하게됩니다.

batch의 문제인지, 불변성의 문제인지 정확히 모르겠네요.

설명해주시면 감사감사!

안녕하세요 구스타프님!

엄청 좋은 질문을 해주셨네요! 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 연락처 남겨주시면 감사의 선물을 보내드리겠습니다 🙇‍♀️

인프런 커뮤니티 질문&답변