react (2) 썸네일형 리스트형 React : 이벤트 설정! render 함수에서 이벤트 설정 한 부분을 확인해보자! render() { return ( 카운터 값: {this.state.number} + - ); } 버튼이 클릭되면 함수가 각각 호출되도록 설정되어 있지? 기존에 자바스크립트로 비슷한 작업을 해봤다면 익숙할거야 위 코드를 다시 봐보자고! 정말로 주의해야 할 점이 있는데! 리액트에서 이벤트 함수를 설정할 때 html과는 다른 점이 있어! 이벤트이름을 설정 할 때 camelCase 로 표기해야 해. onclick 은 onClick, onmousedown 은 onMouseDown, onchange 는 onChange 이런식으로! 이벤트에 전달해주는 값은 함수 여야 해. 만약에 onClick={this.handleIncrease()} 이런식으로 하게 된다.. React 실습 -1 component는 HTML을 반환하는 함수! 따라서 우리는 function, application을 가지고 있고 이것은 HTML을 반환할거야 ReactDOM.render(, document.getElementById("potato")); 부분이 우리가 component를 사용하고자 할 때, component의 형태! 리액트는 컴포넌트를 사용해서 HTML처럼 작성하려는 경우에 필요해 javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다 JSX는 react에서만 쓰이기 때문에 vue, augular 등 에서는 아무짝에도 쓸모가 없어! 하지만 react를 써야한다면 알아둬야한다! 어떻게 컴포넌트를 만들 수 있을까? 매우 간단하지 src폴더에 potato.js를 생성! 여기서 중요!! 컴포넌트.. 이전 1 다음
