DOMContentLoaded - 브라우저가 HTML을 전부 읽고 DOM트리를 완성하는 즉시 발생 (이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않음) – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 활용 document 객체에서 발생, 이 이벤트를 다루려면 addEventListener 사용 - HTML문서 처리중 태그 만나면 DOM 트리 구성 멈추고 태그 실행 스크립트 실행이 끝난 후 에 나머지 문서 처리 load - HTML로 DOM트리를 만드는게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는것이 끝났을떄 발생 beforeunload/ unload - 사용자가 페이즈를 떠날때 발생 defer, async..
폼 요소 input textarea event 이벤트 설명 특이사항 change 값이 변경될 때 이벤트 발생 텍스트 입력의 경우 포커스를 잃을 때 실행 input 텍스트가 입력될 때마다 이벤트 발생 change와 달리 즉시 실행 cut, copy, paste 잘라내기·복사하기·붙여넣기 할 때 이벤트 발생 브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. event.clipboardData 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음 submit 이벤트와 메서드 submit 이벤트는 폼을 제출 할 시 발생 주로 폼을 서버로 전송하기 전 내용검증하거나, 폼 전송 취소 할 시 사용
이벤트 리스닝 및 이벤트 핸들러 수행 const onChange = () => { console.log("ya"); }; //카멜케이스로 작성 //() x, 앞쪽에 함수 생성하는것이 좋음 useState 컴포넌트 하뭇가 다시 호훌되는곳에서 변경된 값 반영하기 위해 state로 값을 정의할 수있게 해줌 리액트 컴포넌트 함수안에서 useState 호출 cosnt [현재 상태값, 업데이트하는 함수 ] = useState (); useState Hook 왜 상수형 사용 ? 등호를 사용해서 값 할당 안함 state 업데이트 하는 방법이 아니기때문 input const hello [hello, sethello] = useState(""); const hi = (event) => { sethello(event.tar..
구조분해할당 Destructuring assignment 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수있게 하는 표현식 배열 구조 분해 let users = ['mike', 'tom', 'jane']; let [user1, user2, user3] = users; //같은것 let user1 = user[0]; let user2 = user[1]; let user3 = user[2]; console.log(user1); //'mike' console.log(user2); //'tom' console.log(user3); //'jane' 배열 구조 분해 : 기본값 let [a,b,c,] = [1,2]; //기본값 없을시 undefined let [a=3, b=4, c=5]..