[REACT]이벤트핸들링

아 너무어려워서 죽어벌릴코임 ㅠㅠ 흑흑..피눈물히나는아이

주의사항

• 기본 dom 요소에만 이벤트를 설정할 수 있다.

• 소문자 대신 카멜케이스(camelCase)를 사용

//기존 html
<button onclick="?"></button>
// React JSX
<button onClick={?}></button>

• 이벤트핸들러 전달방식
  jsx를 사용해 이벤트 핸들러를 전달한다 {} 사용해야함

// 기존 html
<button onclick="testTest()"></button>
// React JSX
<button onClick={ testTest }></button>

• 함수에 인자가 있는 경우와 없는 경우

//없는 경우
<button onClick{increase}>더하기</button>
//있는 경우 (화살표 함수를 사용해준다!)
<button onClick={()=> alerMsg('hello')}>alert출력</button>
<button onClick={(e)=> consoleMsg('hello')}>console 출력</button>

virtualDom이란?

이런식으로 virtualDom은 가상의 돔을 하나 더 만들어서 사용한다!
저렇게 특정 부분을 수정하고 싶을때 dom은 처음부터 다시 로딩을 시작하지만 virtualDom은 기존에 있던 것과 겹치듯이(비교하여)바뀐부분을 알아내 직접적인 수정이 가능함!!
그래서 virtualDom은 메모리도 적게 먹고 로딩도 빠르고 여러므로 좋다!