React : input에 글 쓰면 게시글 추가하기 (onChange, 매개변수, trim, splice)

input에 글 쓰면 게시글 추가하기

조건

input에 텍스트를 넣고 발행버튼을 클릭하면 게시글 목록 상단에 추가된다.
아무 텍스트도 입력하지 않았다면 발행을 막는다.

---

풀이

let [input, setInput] = useState('');
let handleSubmit = (e) => {
  e.preventDefault();
  if (input.trim() !== ""){
    let copyTitle = [...title];
    copyTitle.unshift(input);
    setTitle(copyTitle);
  } else {alert(`글제목을 입력하세요.`)}
}
return (
    <div className="App">
      { 
        title.map(function(a,i){
          return (
            <div className="list" key={i}>
                <h4>{ title[i] }</h4>
                <button onClick={(i) => handlesetLike(i)}>👍  { like[i] }</button>
                <button onClick={()=>{ modal ? setModal(false) : (setModal(true),setTitleIndex(i)) } }>🗨</button>
                <p>2월 18일 발행</p>
              </div>
          );
        }) 
      }
      <input id='title' name='title' type="text" onChange={ (e)=> setInput(e.target.value) }/>
      <button type="submit" onClick={ handleSubmit }>발행</button>
    </div>
  );

---

알게 된 점 1

input태그에 onChange는 텍스트를 한글자씩 타자칠때마다 바뀌는건데 그걸 setInput 해버리면 한글자씩 다 배열에 들어가버리지 않을까? 생각했지만,
당연히 아니었다. input state는 애초에 배열이 아닌 ' ' 문자열로 세팅되어 있었고, handleSubmit 되는 시점도 발행 버튼을 누르는 시점이기 때문이다.
생각을 좀더 가볍게 할 필요가 있따.

알게 된 점 2

빈 문자열을 검사하려면 trim()을 쓰면 된다.

---

게시글 삭제하기

조건

삭제 버튼을 누르면 해당 게시글이 삭제된다.

---

풀이

let handleDelete = (i, e) => {
  e.preventDefault();
  let copyTitle = [...title];
  copyTitle.splice(i, 1);
  setTitle(copyTitle);
}
title.map(function(a,i){
  return (
    <div className="list" key={i}>
      <h4>{ title[i] }</h4>
      <button onClick={() => handlesetLike(i)}>👍  { like[i] }</button>
      <button onClick={()=>{ modal ? setModal(false) : (setModal(true),setTitleIndex(i)) } }>🗨</button>
      <button onClick={(e) => handleDelete(i,e) }>삭제</button>
      <p>2월 18일 발행</p>
    </div>
  );
})

코드는 다 짜놓고 매개변수를 잘못 넣어서 고생했다.

---

알게 된 점 1

i는 map 메서드가 호출될 때 자동으로 제공되므로, map 함수 내에서 i를 매개변수로 별도 지정할 필요가 없다. (배열이기 때문이다. 이를 "콜백 함수 인자"라고 한다고..)

알게 된 점 2

그에 반해 e는 매개변수로 지정해주어야 한다. onClick 함수는 자체적으로 이벤트 객체를 생성한다. handleDelete 함수에서 이벤트 객체에 접근하기 위해서는 onClick 함수에서 이벤트 객체를 받아 handleDelete에 전달해야 하기 때문에, e를 꼭 넣어줘야 했다.

---

출처 : 코딩애플 https://codingapple.com/