[React] input, state배열 추가 및 삭제

위와 같은 상황에서 리스트 추가 or 삭제하는 기능을 추가해보려한다.

추가 unshift()

1. input에 무언가를 입력했을때 코드를 실행하고자 할때는 onChange나 onInput 이벤트핸들러를 사용한다.

<input onChange={()=>{ console.log(e.target.value)}}/>

e라는 파라미터를 추가하고 e.target.value를 작성하면 input에 입력된 값을 가져올수있다.
참고로 e는 이벤트 객체 이런식으로 부르는데 현재발생하는 이벤트와 관련된 유용한 기능을 제공하는 일종의 변수형태이다! 
예를 들면 

e.target : 현재 이벤트가 발생한곳을 알려준다.
e.preventDefault() : 이벤트 기본동작을 막는다.
e.stopPropagation() : 이벤트 버블링 방지.

2. 사용자가 입력한 데이터는 state에 저장

function App (){

  let [add, setAdd] = useState('');
  return (
    <input onChange={(e)=>{setAdd(e.target.value)console.log(입력값)}} />
  )
}

이때, e.target.value 는 input태그에 입력한 값을 알려준다. 

3. 기존 타이틀 값을 변수 copy에 저장하고 사용자가 입력한 값 add를 이 copy된 값에 추가 후 state변경함수 사용

	<input onChange={(e)=>{setAdd(e.target.value)}} ></input>
      <button onClick={(e)=>{
        let copy = [...title];
        copy.unshift(add);
        setTitle(copy);
      }}>
   		<span>add</span>
    </button>
        

	.unshift() : 배열의 맨 앞에 값을 추가한다.
    
    

삭제 splice()

<button onClick={(e)=>{
    let copy = [...title];
    copy.splice(i,i+1);
    setTitle(copy);
}}>삭제</button>

.splice(a,b) : 배열객체 기존 요소를 삭제하거나 교체하여 배열의 내용을 변경한다.
  → a는 변경을 시작할 인덱스
  → b는 배열에서 제거할 요소의 수
  

 {
        title.map(function(a,i){
          return (
            <div  className='list' >
              <h4 onClick={()=>{setModal(!modal)}}> { title[i]}
                <span 
                  style={{cursor:"pointer"}} 
                  onClick={(e)=>{ e.stopPropagation();
                    // 상위 html로 퍼지는 이벤트 버블링 방지.
                  let copy = [...good];
                  copy[i] = copy[i]+1;
                  setGood(copy)
                  }}>👍
                </span>
                {good[i]}
              </h4>
              
              <p>2월 17일 발행</p>
              <button onClick={(e)=>{
                let copy = [...title];
                copy.splice(i,i+1);
                setTitle(copy);
              }}>삭제</button>
            </div> 
            )
          })
        }