연습 프로젝트

지금 까지 배운 양방향 바인딩, 상향식 통신, 사용자 state를 관리하고 state를 통해 사용자 리스트 관리, 재사용 컴포넌트 사용등을 복습 할 수 있는 간단한 연습 프로젝트 였습니다.

어려웠던 점

원래는 유저 입력값을 검증 하는 과정에서 다음과 같이 코드를 작성하였습니다.

하지만 제가 생각한 결과가 나오지 않고 isValidName,isValidAge의 state가 바로 변경 되지 않아서 계속 시간을 낭비 했는데요🙄🙄
이유는!!
다음과 같이 함수 안에서 state의 변경이 생기면 함수가 종료된 뒤에 변경되는것을 몰라서 생긴일이였습니다.

const NewForm = () => {
	const [name,setName] = useState('')
    const [age,setAge] = useState('')
   	const [isValidName, setIsvalidName] = useState(true)
    const [isValidAge, setIsValidAge] = useState(true)
    
    const checkName = () => {
    	if(name.trim().length === 0) setIsvalidName(false)
    }
    const checkAge = () => {
    	if(age.trim().length === 0) setIsvalidName(false)
        if(+age < 0) setIsvalidName(false)
    }
    const submitHandler = (event) => {
        event.preventDefault();
    	checkName()
        checkAge() 
        if(isValidName && isValidAge) {
        	/*
            	유저 객체 생성 및 전달 받은 props 함수를 통해 
                부모 컴포넌트로 유저 데이터 전달
                name, age의 state를 ''으로 저장
            */
        }else{
        	// 에러 모달창 state 값 변경  
        }
    }
}

그래서 state를 사용하지 않고 다음과 같이 코드를 변경하여 원하는 결과을 얻을 수 있었습니다!!😃🤣

const NewForm = () => {
	const [name,setName] = useState('')
    const [age,setAge] = useState('')
	if (name.trim().length === 0 || age.trim().length === 0) {
            // 에러 메세지 저장 및 에러 모달 state 변경
            return;
        }
        if (+age < 0 || +age > 100) {
            // 에러 메세지 저장 및 에러 모달 state 변경
            return;
        }
        /*
           유저 객체 생성 및 전달 받은 props 함수를 통해 
           부모 컴포넌트로 유저 데이터 전달
           name, age의 state를 ''으로 저장
        */
    };
}

추가 사항

추가로 유저 리스트의 목록을 지우는 버튼도 구현해봤습니다.

userList 깃헙 페이지