react input 응용

1. 글에 아무것도 입력안하고 발행버튼 누르는거 막기

입력한 text내용 if문으로 체크. 비어있으면 alert창을 띄우고 글추가를 막음.

  const date = new Date();
  let [글생성시간, 글생성시간변경] = useState([
    date.toLocaleString(),
    date.toLocaleString(),
    date.toLocaleString(),
  ]);

  //엔터키 누를때 실행되는 함수
  const activeEnter = (e) => {
    if (e.key === "Enter") {
      const inputText = e.target.value;
      if (inputText == "" || null) {
        alert("내용이 비어있습니다.");
      } else {
        //글제목 array state 맨앞에 추가. spread 연산자 사용.
        //새 항목을 포함하는 새로운 배열 생성. 앞에 넣으면 앞쪽에 생성됨.
        let copy = [inputText, ...글제목];
        글제목변경(copy);
        //글제목변경 후, 따봉 배열 추가
        let copy2 = [0, ...따봉];
        따봉변경(copy2);
      }
    }
  };

2. 날짜데이터

1. Date 변수 하나 생성.
2. 현재 날짜를 나타내는 array state 생성.
   • date.toLocaleString()로 현재시각까지 나타냄
3. 글 추가 / 삭제하면 따봉도 추가 / 삭제 했듯이 똑같이 추가

  //엔터키 누를때 실행되는 함수
  const activeEnter = (e) => {
    if (e.key === "Enter") {
      const inputText = e.target.value;
      if (inputText == "" || null) {
        alert("내용이 비어있습니다.");
      } else {
        //글제목 array state 맨앞에 추가. spread 연산자 사용.
        //새 항목을 포함하는 새로운 배열 생성. 앞에 넣으면 앞쪽에 생성됨.
        let copy = [inputText, ...글제목];
        글제목변경(copy);
        //글제목변경 후, 따봉 배열 추가
        let copy2 = [0, ...따봉];
        따봉변경(copy2);
        let copy3 = [new Date().toLocaleString(), ...글생성시간];
        글생성시간변경(copy3);
      }
    }
  };
  //글제목 옆의 삭제버튼 클릭시 실행되는 함수.
  const deleteOne = (index) => {
    let copy = [...글제목];
    let copy2 = [...따봉];
    let copy3 = [...글생성시간];
    //filter 함수 사용.
    //삭제할글제목과 다른 배열 요소들만 필터링하여 반환. 재렌더링.
    글제목변경(copy.filter((_, i) => i !== index));
    따봉변경(copy2.filter((_, i) => i !== index));
    글생성시간변경(copy3.filter((_, i) => i !== index));
  };