이슈

input에 텍스트 입력 후 backspace로 지워도 마지막 한 글자가 지워지지 않는 이슈 입니다.

원인

1. 공백 때문에 빈 텍스트라고 인식하지 않음
2. 조건문이 잘못 되었을 수 있음

제 코드 상 input의 onchange 이벤트(handleChange 함수)에서 입력값을 업데이트할 때 text 변수에 담아 사용하고 있으며,
이 변수는 e.target.value의 값을 그대로 사용하고 있기 때문에 backspace 키로 입력값이 삭제되어도 e.target.value에는 아직 삭제되지 않은 마지막 한 글자가 남아있을 수 있습니다. 이로 인해 text.trim() === '' 조건이 만족되지 않고 함수가 정상적으로 처리되지 않는 문제가 발생합니다

    const handleChange = (e) => {
      const text = e.target.value;

      if(text === '') {
      	// 텍스트가 입력되지 않았다면
        ...
      } else {
	  	// 텍스트 입력 되었다면
        setText(text); // 텍스트값 저장
      }
    };

해결

1. 입력받은 텍스트에 .trim() 메서드로 공백을 제거합니다.
   e.target.value 값을 .trim() 메서드로 공백을 제거한 후에 비교합니다. 이렇게 하면 backspace로 인해 입력값이 모두 지워진 경우에도 trim() 후의 길이가 0이 되어 조건이 충족됩니다.
   (trim()을 하게 되면 띄어쓰기가 인식되지 않기 때문에 띄어쓰기가 필요한 경우 생략해도 동작했습니다. 여기서 문제는 2번 때문인 것 같습니다.)

2. 입력값을 업데이트하기 전에 조건을 확인하고, 필요한 처리를 하도록 코드를 재구성합니다.
   텍스트가 입력되지 않았을 때(백스페이스로 텍스트를 모두 지웠을 때) setText('') 하여 텍스트를 빈값으로 만들어줍니다.

    const handleChange = (e) => {
      const text = e.target.value.trim();  // trim() : 공백제거

      if(text === '') {
        // 텍스트가 입력되지 않았다면
        setText(''); // 추가⭐
        
      } else {
        // 입력값 있는 경우
        setText(text); // 텍스트값 저장
      }
    };