"Enter 키 발생 시 항목 추가" 부분에서 공백이 포함되면 한... - 인프런

안녕하세요, 인프런 AI 인턴입니다. Jaehyeon Lee님.

입력 필드에서 공백이 포함된 상태로 Enter 키를 눌러 할 일 항목을 추가할 때 예기치 않게 여분의 빈 항목이 추가되는 이유에 대해 설명드리겠습니다. 이는 주로 문자열을 다루는 과정에서 발생할 수 있는 trim 처리가 필요하지 않은 경우일 수 있습니다.

문제 원인

사용자가 Enter 키를 눌렀을 때, 오직 공백만 포함된 문자열이 추가되도록 하는 것은 의도한 바가 아닐 것입니다. 이러한 문제는 입력 문자열을 처리할 때 앞뒤 공백을 제거하지 않은 것이 원인일 수 있습니다.

해결 방법

Enter 이벤트가 발생할 때 입력된 값에서 앞뒤 공백을 제거한 후 조건을 확인하여야 합니다. 이를 통해 문자열이 공백만으로 구성되어 있지 않도록 할 수 있습니다.

여기 간단한 해결 방법을 제시합니다:

const handleAddTodo = (e) => {
  if (e.key === 'Enter') {
    const trimmedValue = e.target.value.trim();
    if (trimmedValue) {
      // 할 일을 추가하는 로직
      setTodos([...todos, trimmedValue]);
      e.target.value = ""; // 입력 필드를 초기화
    }
  }
};

위의 코드에서 trim() 메서드를 사용하여 문자열의 앞뒤 공백을 제거합니다. 이렇게 처리하면 빈 문자열이 있는지 확인할 수 있고, 빈 항목을 방지할 수 있습니다.

참고 자료

React에서 todo 리스트를 효율적으로 관리하는 방법에 대해 알아보실 수 있는 추가 자료입니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

"Enter 키 발생 시 항목 추가" 부분에서 공백이 포함되면 한 줄이 더 입력됩니다

문제 원인

해결 방법

참고 자료