React 회원가입 구현시 상태값 변경 관련

Question

react로 회원가입 페이지를 구현 중입니다. 다음과 같이 타입을 정의하고모든 입력값의 유효성 체크가 true일때 버튼을 활성화하고 동시에회색(#D3D3D3)에서 붉은색으로(#D80000) 색상 변경을 진행하려고 합니다.모든 입력값이 true인데도 isButtonActived가 true로 변경되지 않습니다. 무엇이 문제일까요? const SignupButton = styled(Button)<{disabled : boolean}>` background-color :${({disabled})=> disabled ? '#D3D3D3' : 'var(--jled, #B80000)'} } ` export default function Signup(){ interface formType { businessmanGubun : string, businessmanRegisterNum : number, businessName : string, businessmanName : string, businessmanSurname : string, address : string, zonecode : number | string, detailAddress : string, businessRegistrationFile : File | null, loginId : string, password : string, managerName : string, managerSurname : string, managerPosition : string, managerTel : string, email : string, } // 회원가입 유효성 체크 타입 type validFormType = { [k in keyof formType] : boolean; } // 필수 동의항목 체크 박스 타입 정의 type requiredCheckType = { isOverFourTeen : boolean, isAgreedServiceTerm : boolean, isAgreedPersonalInfo : boolean, isAgreedEcommerce : boolean, } // 필수 동의항목 체크 박스 유효성 체크 타입 type validRequiredCheckType = { [k in keyof requiredCheckType] : boolean; } type validType = validFormType & validRequiredCheckType export default function Signup(){ // 회원가입 양식 데이터 const [form, setForm] = useState({ // 사업자 구분 businessmanGubun : '', businessmanRegisterNum : 0, businessName : '', businessmanName : '', businessmanSurname : '', businessRegistrationFile : null, ..... }) // 회원가입(사업자 정보, 사업자 주소, 아이디/ 패스워드, 담당자 정보) & 필수 동의 체크 박스 유효성 체크 const [isValid, setValid] = useState({ businessmanGubun : false, businessmanRegisterNum : false, businessName : false, businessmanName : false, businessmanSurname : false, address : false, zonecode : false, detailAddress : false, businessRegistrationFile : false, loginId : false, password : false, managerName : false, managerSurname : false, managerPosition : false, managerTel : false, email : false, isOverFourTeen : false, isAgreedServiceTerm : false, isAgreedPersonalInfo : false, isAgreedEcommerce : false, }) //버튼 활성화 비활성화 const [isButtonActived, setButtonActived] = useState(false) console.log(`isButtonActived :${isButtonActived}` ) console.log(`isvalid : ${JSON.stringify(isValid)}`) const isActived = ()=>{ let k : keyof validType; for(k in isValid){ if(isValid[k] === false) setButtonActived(false); return; } setButtonActived(true); } useEffect(()=>{ isActived(); },[isValid]) ... 가입하기 }

Chobby · Accepted Answer

if(isValid[k] === false) setButtonActived(false); return;위 부분이 문제네요.isValid[k]의 상태와 상관없이 무조건 종료됩니다.if(isValid[k] === false) { setButtonActived(false); return; }

React 회원가입 구현시 상태값 변경 관련

1개의 답변

기술 목록