input 태그 안에 글 올리기, 글 삭제하기

사용자가 입력한 글 글 목록에 추가하기

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
      <button onClick={()=>{ 
        let copy = [...글제목];
        copy.unshift(입력값);
        글제목변경(copy)
      }}>글발행</button>
    </div>
  )
}

1. input 태그 안에 원하는 값들을 입력한다.
2. 그 원하는 입력값은 <input onChange={ (e)=>{ 입력값변경(e.target.value) } } /> 로 인해 state에 입력값으로 다 저장이 된다. 
3. 글제목 state부터 일단 복사. array 형태의 state 조작은 우선 카피부터!
4. 복사한거에 unshift(입력값)을 해서 array 자료의 맨 앞에 자료를 추가해준다.
5. 그리고 추가된 복사본을 state 변경함수를 사용하여 바꿔준다.

글 삭제

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return ( 
    <div>
    { 
     글제목.map(function(a, i){
        return (
          <div className="list">
            <h4>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>
            <button onClick={()=>{ 
              let copy = [...글제목];
              copy.splice(i, 1);
              글제목변경(copy);
           }}>삭제</button>
          </div> 
        )
     }) 
    }  
  </div>
  )
}

1. 일단 버튼 눌렀을 때 글제목 state부터 복사
2. 글제목 array state에서 x번째 데이터를 없애고 싶다면 splice(x,1)을 쓰면됨
   • splice(x,1) -> array 자료에서 x번째 데이터를 삭제하고 싶을 때
3. 마무리로 삭제한 copy를 state 변경함수를 사용하여 copy본으로 바꿔준다.