11. input 1 : 사용자가 입력한 글 다루기(등록, 삭제)

input 에 입력한 값 가져오기

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

이벤트 버블링 막아주기

e.stopPropagation();    // 상위 html로 퍼지는 이벤트 버블링을 막고싶으면!

사용자가 input에 입력한 데이터 저장하기

function App (){

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

(참고)

근데 위 코드 실행해보면 a를 입력하면 콘솔창에 아무것도 안뜨지 않습니까

aa를 입력하면 a만 콘솔창에 뜨고요.

왜냐면 state 변경함수 특징 때문인데 state 변경함수는 약간 늦게 처리됩니다.

전문용어로 async하게 (비동기적으로) 처리된다고 합니다.

그리고 자바스크립트에선 늦게 처리되는 코드들은 잠깐 제쳐두고 바로 다음줄을 실행해줍니다.

그래서 console.log(입력값) 이게 먼저 실행되어서 저렇게 나오는 것일 뿐입니다.

그냥 실행 순서만 좀 다를 뿐 state변경은 어쨌든 잘 됩니다.

Q1. 글 등록하기

• input에 입력하고 [글 등록] 버튼 클릭시 글 추가.

{/*이벤트 핸들러*/}
<input onChange={(e) => {
    입력값변경(e.target.value);  
    console.log(입력값);        
}} />
<button onClick={(e) => {
    let copy = [...title];
    copy.push(입력값);
    setTitle(copy);
}}> 글 등록 </button>

Q2. 글 삭제하기

title.map(function(a, i) {
  return (
    <div className="list" key={i}>
      <h4 onClick={()=>{ setModal(true); setTitleNum(i); }}> { title[i] }
        <span onClick={(e) => {
            e.stopPropagation();    // 상위 html로 퍼지는 이벤트 버블링을 막고싶으면!
            let copy = [...따봉];
            copy[i] += 1;
            따봉변경(copy);
          }}>👍</span> { 따봉[i] }
      </h4>
      <p>{ date[i] }</p>
      <button onClick={(e) => {
          let copy = [...title];
          copy.splice(i, 1);  // arr.splice : i번째부터 1개만큼 삭제.
          setTitle(copy);
        }}> 글 삭제 </button>
    </div>
  )
})