글 삭제를 제작했다. 에로 사항이 있었다면 글만 삭제 된다는 것이었다.

// 최종 코드 
<button className="remove-btn" onClick={() => {
let remove = [...글제목];          // 새 배열 형성
remove.splice(i, 1);               // 클릭된 인덱스의 배열에서 1자리 제거하기  
제목수정(remove);                  //  새로운 스테이트로 변경 
}}>

추가 예제 : React 공백 검사

배열의 해당 [i]의 값을 null 처리하니 글 제목만 삭제 되었다.

문제는 null은 공백 값이기 때문이었다. 그래서 map은 값이 그래도 “배열에 존재함” 이라

인식하고 map에서 해당 “글 제목 값만” 삭제했던 것이다.

let remove = [...글제목];         
remove[i] = null;                
제목수정(remove); 

null 처리하면 [글제목] = useState('a, b, c, ""')

출처 : MDN-CDN_DOCS
null 은 JavaScript의 원시 값 중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다.    

글 추가

input에 값이 없어도 공백으로 state에 추가해서 글이 추가된다.

해결 : onClick시 e.targetValue 가 공백이 아닐 시에만 ! 입력 값에 추가해준다.

      <button onClick={function () {
          if **(입력값 !== "")** {
            제목수정(글제목.concat(입력값));
          }
        }}
      >      
      
  // 하지만 이 코드에는 하나의 문제점이 있다. 바로 글이 *뒤에* 생긴다는 것. 앞에 생기게 하려면
  
  let newCopy = [...글제목]
	newCopy.unshift(입력값) // 배열 맨 앞에 추가해주세요
	제목수정(newCopy)

추가 문제

글을 추가하니 새로운 HTML에는 좋아요 형성되지만 기존 것들의 좋아요가 사라진다.