input 다루기

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

 

이벤트 안에 매개변수 e를 잡으면 안의 함수에서 e.target.value로 input의 value값을 가져올 수 있다.

 

<div className="list">
   <h4 onClick={()=>{setModal(!modal); setTitle(i)}}>{a} 
     <span onClick={(e)=> { let dda = [...따봉]; dda[i] += 1; 따봉변경(dda); 
     e.stopPropagation(); }}>
                👍
                </span>
                {따봉[i]}
   </h4>
   <p>2월 17일 발행</p>
</div>

위의 코드의 경우 span을 클릭해도 3번의 이벤트가 일어난다 span이벤트-> h4 이벤트 -> div 이벤트 순이다.

클릭이벤트는 상위 html로 퍼진다. 이것을 이벤트 버블링이라 한다. 이걸 막기 위해서는 원하는 이벤트에 e.stopPropagation()을 사용하면 된다.

 

같은 이벤트안에서 스테이트를 변경하면 어떻게 될까? 변경처리가 한발짝 늦어 아래 함수가 발동하게 된다.

애플코딩 - 리액트 강의

 

                <button onClick={()=>{
                  let copy = [...글제목];
                  copy.splice(i,1); //(i에서부터, 몇개 삭제)이다
                  글제목변경(copy);
                }}> 삭제</button>