[Javascript] trim(), Input 공백 입력 시 유효성 검사

안셩·2024년 10월 15일

복습내용

목록 보기
25/27
  const handleSubmit = (e) => {
    e.preventDefault(); // <2>

    if (!newTodo.trim()) {
      return; // <3>
    }

    setTodos([...todos, { id: crypto.randomUUID(), text: newTodo }]); // <4>
    setNewTodo(""); // <5>
  };

투두리스트를 만들면서, Form태그와 onSubmit 이벤트 핸들러를 처리하는 코드가 필요하다.


이떄, 인풋창에 공백을 입력했을 때 입력이 비어있음을 알려주는 유효성 검사가 필요하다.
그 때, 아래의 코드를 입력하면 공백을 입력했을 시 입력하지 않았다는 알림을 줄 수 있다.

const input = "  ";
if (input.trim() === "") {
  console.log("입력이 비어 있습니다.");
}

trim()은 문자열 양 끝의 공백을 제거하면서 원본 문자열을 수정하지 않고 새로운 문자열을 반환하는 메서드이다.

투두리스트에

  • 불필요한 빈 할 일이 리스트에 추가되지 않도록 방지
  • 데이터의 무결성을 유지하는 데 도움이 됨
profile
24.07.15 프론트엔드 개발 첫 걸음

0개의 댓글