Conversation
|
|
||
| const validateResult = await validateSignUpRequest(email); | ||
|
|
||
| if (validateSignUpError) { |
There was a problem hiding this comment.
여기서 validate를 요청하였을 때 state가 한 단계씩 미뤄서 적용이 됩니다.
그래서 콘솔에는 error가 뜨는데 실제 동작은 한 번 더 submit을 해야 수행이 됩니다.
여러 방법을 시도해봤는데 해결되지 않아서 질문 드립니다!
어떻게 수정하면 해결될까요??
There was a problem hiding this comment.
validateSignUpRequest 를 비동기로 실행하도록 했지만 validateSignUpError 는 state 라 비동기 처리 완료 > setState 라는 실행 순서로 보장이 안될 것 같습니다.
응답 결과에 따라 처리하려면 validateSignUpRequest 함수 반환값으로 error 를 받아서 처리해야 합니다.
There was a problem hiding this comment.
로직 구현에 신경 쓰신게 느껴져요!
라이브러리 사용에 대해 고민이라고 하셨는데,
폼 관련 개발이 처음이라면 지금처럼 유효성 검사와 폼 데이터 관리를 직접 해보시는게 좋은 것 같아요.
코드가 길어지고 복잡해지는걸 직접 느끼셨으니까요!
라이브러리를 사용하게 되면 편하게 개발할 수 있겠지만 학습 차원에서 어떻게 개선할 수 있을지를 직접 고민해보고 적용하는게 어떨까 싶습니다.
그 다음 라이브러리를 사용하더라도 이런 비슷한 원리로 동작하겠구나 를 이해하면 더 다루기 쉬워질 거에요~
개선 방향으로는 폼 데이터를 useReducer 로 관리할 수 있게 찾아보시면 좋을 것 같아요.
고생하셨습니다 👏
|
|
||
| interface ParamsType { | ||
| folderId: number; | ||
| } | ||
|
|
||
| console.log(user); |
| (showError.password.error && | ||
| showError.password.message !== '비밀번호를 확인해 주세요.') | ||
| ) | ||
| return; |
| <S.SnsWrap> | ||
| <S.SnsTitle>소셜 로그인</S.SnsTitle> | ||
| <S.SnsList> | ||
| <li> | ||
| <Link href='https://www.google.com/'> | ||
| <Image | ||
| src={GoggleIcon} | ||
| alt='구글 로그인' | ||
| width='42' | ||
| height='42' | ||
| /> | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link href='https://www.kakaocorp.com/page/'> | ||
| <Image | ||
| src={KakaotalkIcon} | ||
| alt='카카오톡 로그인' | ||
| width='42' | ||
| height='42' | ||
| /> | ||
| </Link> | ||
| </li> | ||
| </S.SnsList> | ||
| </S.SnsWrap> |
There was a problem hiding this comment.
컴포넌트를 분리해볼까요? 회원가입 페이지에서도 사용할 수 있겠어요
여기 뿐만 아니라 인풋 쪽 Ui 부분이 좀 길어져서 분리하면 좋을 것 같아요.
저는 큰 컴포넌트를 더 잘게 쪼개야겠다고 느끼는 지점이 jsx 부분을 훑어보고 구성하는 요소가 머리 속으로 떠올리기 어려울 때라 다은님도 요 기준을 적용해보셔도 좋을 것 같아요!
| const { | ||
| pending: validateSignUpPending, | ||
| error: validateSignUpError, | ||
| requestFunction: validateSignUpRequest, | ||
| } = useAsync(postValidateSignUp); |
There was a problem hiding this comment.
제가 생각했을 때 validate 는 값에 대한 유효성을 체크한다는 의미를 담고 있다고 생각해서요.
중복이 아닐 때 유효한 값임을 조건으로 포함하고 있고, 실제로 postValidateSignUp 가 하는 역할은 중복이 아닌지 체크하는 거라 postCheckDuplicateEmail 이런식으로 네이밍하면 좀 더 명확할 것 같습니다.
|
|
||
| const validateResult = await validateSignUpRequest(email); | ||
|
|
||
| if (validateSignUpError) { |
There was a problem hiding this comment.
validateSignUpRequest 를 비동기로 실행하도록 했지만 validateSignUpError 는 state 라 비동기 처리 완료 > setState 라는 실행 순서로 보장이 안될 것 같습니다.
응답 결과에 따라 처리하려면 validateSignUpRequest 함수 반환값으로 error 를 받아서 처리해야 합니다.
| @@ -39,6 +39,7 @@ export function UserProvider({ children }: Props) { | |||
| const handleLoadUser = async () => { | |||
| const nextUser = await getUser(); | |||
| setUser(nextUser); | |||
| console.log(user); | |||
| setter: Dispatch< | ||
| SetStateAction<{ | ||
| email: { error: boolean; message: string }; | ||
| password: { error: boolean; message: string }; | ||
| passwordConform: { error: boolean; message: string }; | ||
| }> | ||
| > |
There was a problem hiding this comment.
dispatch 를 받아서 오류 상태를 설정하고, 호출한 곳에선 state 로 관리하는 것 같습니다.
dispatch 를 받아오게 되면 state 형태를 맞춰줘야 해서 유지보수가 어려워질 것 같아요~
오류 상황에 message 를 리턴하도록 하고 호출한 곳에서 리턴 값을 받아 setState 를 처리하는 걸로 하면 어떨까 합니다.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게