Conversation
|
| onChange={({ target }) => setValue(target.value)} | ||
| /> | ||
| <span | ||
| className={isValid ? "hidden" : ""} |
There was a problem hiding this comment.
BEM 방식으로 className convention을 정하신것같네요!
className도 일관성있게 BEM 방식으로 쓰셔야 혼동이 없을것같아요!
There was a problem hiding this comment.
Basic 스프린트를 BEM으로 했는데, 마이그레이션을 한 후 일관되게 하지 못했습니다. 다만 sprint6에서는 styled-component로 바꿀거라, BEM을 삭제해야할 것 같네요
| const [email, setEmail] = useState(""); | ||
| const [emailValid, setEmailValid] = useState(false); | ||
| const [nickname, setNickname] = useState(""); | ||
| const [nicknameValid, setNicknameValid] = useState(false); | ||
| const [password, setPassword] = useState(""); | ||
| const [passwordValid, setPasswordValid] = useState(false); | ||
| const [confirmPassword, setConfirmPassword] = useState(""); | ||
| const [confirmPasswordValid, setConfirmPasswordValid] = useState(false); | ||
| const [isValid, setIsValid] = useState(false); |
There was a problem hiding this comment.
이런 값이 유효한지를 판단하는 조건은
state로 관리 하는것보다
state의 값을 기반으로 한 조건 으로 관리할 수 있습니다.
ex)
const validNickname = (nickname: string): boolean => {
return nickname.length >= 3; // 예시 조건
};
const validPassword = (password: string): boolean => {
return password.length >= 8; // 예시 조건
};state인 nickName, password를 받아서 검사하는 함수인데, 반환 타입은 boolean이 됩니다. state가 없어도 되죠.
const nickNameValid = nickname.length >= 3;
const passwordValid = password.length >= 8; 꼭 함수가 아니어도 비교연산자는 항상 boolean 타입을 반환하니까 state의 값을 비교 연산자로 계산하면 state로 관리 하지않아도 됩니다.
그래서 모든 유효성 검사 값이 true가 되면 isValid도 true가 되겠죠. setIsValid 없이도 계산된 값들로 비교해서 결과를 얻을 수 있습니다.
There was a problem hiding this comment.
마이그레이션하면서 이전 값을 최대한 유지하면서 수정해서 생긴 오류네요.. 평소에 react로 만들면 어떤 코드가 더 나을지 생각을 해야할 것 같습니다.
| useEffect(() => { | ||
| setConfirmPasswordValid(password === confirmPassword); | ||
| }, [password, confirmPassword]); | ||
|
|
||
| useEffect(() => { | ||
| setIsValid( | ||
| emailValid && nicknameValid && passwordValid && confirmPasswordValid | ||
| ); | ||
| }, [emailValid, nicknameValid, passwordValid, confirmPasswordValid]); |
There was a problem hiding this comment.
유효성 검사 state를 전부 변수처리하면 이 코드들도 간략하게 변수로 바꿀 수 있습니다.
There was a problem hiding this comment.
첫 번째 useEffect는 변수처리해도 될 것 같은데, 두 번째 useEffect는 focusout(onBlur)에 반응하는 함수라 useEffect로 나둬야 될 것 같습니다. 맞을까요?
요구사항
기본
중고마켓
반응형
베스트 상품
전체 상품
심화
주요 변경사항
스크린샷
PC
Tablet
Mobile
멘토에게