TIL) 리액트, 빈칸이 입력이 되지 않도록 하기

 

 

리액트로 CRUD를 구현하던 중에, 유저가 빈칸을 입력하면 입력이 되지 않도록 하는 코드 입니다. 

 

부모 파일인 App.js에서는 Create에 대한 handler를 자식 파일에게 props로 전달해줍니다. 

const addGoalHandler = (enteredText) => {
    setCourseGoals((prevGoals) => {
      const updatedGoals = [...prevGoals];
      updatedGoals.unshift({ text: enteredText, id: Math.random().toString() });
      return updatedGoals;
    });
  };

 <CourseInput onAddGoal={addGoalHandler} />

 

그리고 자식에서는 그 props를 받아서 submit을 하기 전에, 현재 값의 길이가 0이면 그냥 return 을 해줍니다. 

 

const CourseInput = (props) => {
  const [enteredValue, setEnteredValue] = useState("");

  const formSubmitHandler = (event) => {
    event.preventDefault();
    if (enteredValue.trim().length === 0) {
      return;
    }
    props.onAddGoal(enteredValue);
  };
  
  return () ... 
}

 

여기서 trim은 유저가 과도하게 빈칸을 입력할 경우를 대비하여 작성하였습니다. 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓