카멜표기법 : onClick{}의 형태로 실행
함수 형태의 값 전달 : ()=>{} 호살표 함수 사용, 작성 후 변수 이름으로 전달
Dom요소에만 설정 : 컴포넌트에 전달 시, 속성(props)으로 들어간다
[ES7-React/Redux/React-Native/JS snippets 확장을 했다면 빈 공간에 rce를 입력하면 기본형태가 바로 완성된다.]
예)on-click
onClick'=' {()=>{}} 또는 onClick'=' {function(){}}
= 양 끝 ''는 제외[JSON 에러 때문에 임시로 넣음]화살표함수로 쓸 때에는 this(자기자신-컴포넌트 클래스 호출)이 가능한데 익명함수로 쓸 때에는 연결된 객체가 없으므로 undefined가 출력된다. 이때 익명함수의 this값을 연결하기 위해서는 function(e){내용.bind(this)} 처럼 붙여야 한다.
render 안에서 this=컴포넌트명 이고 this.state는 constructor의 속성값이다. return 안의 .bind(this)에서 불러오는 this 또한 컴포넌트명 이다. 화살표함수의 this 또한 컴포넌트명 이지만 특이하게 익명함수에서의 .bind(this)가 없는 this에 마우스를 가져다 대면 any 가 나온다.
메소드를 작성해서 이벤트를 사용하는 경우
- render 이전에 이벤트명(){함수}를 작성한다.
- constructor 에서 state 끝나는 문장 뒤에 this.이벤트명=this.이벤트명.bind(this); 추가
익명함수에서 했던 function(){함수} 와 비슷하다. 대신 function부분을 모두 render 밖으로 꺼내서 넣고 .bind(this)을 지우고 function 대신 함수이름을 넣고 위 과정 2개를 한 것이다. 익명함수나 화살표함수로 작성하기에는 함수내용이 긴 경우 쓰기 좋다.
()안에 e 를 넣어 이벤트 객체를 들고 와서 e.type을 통해서 어떤 이벤트인지 구분이 가능하다.
메소드를 작성해서 이벤트를 사용 할 때 화살표함수를 쓰고 싶다면 메소드명=()=>{} 형태로 써야 하고 위에 constructor에는 입력할 필요가 없으며, 쓰이는 방법은 그대로 this.메소드명 이다.
form-input 태그의 값 사용하기
input 태그에서 값을 가져올 state를 onChange를 사용해서 수정