KBennyCC

React.js 01.6. 리액트의 이벤트 // 사용방법 /* this.setState({ 수정할 필드 이름 : 값 ,수정할 또 다른 필드 이름 : 값 }); */ render() { return ( < div > < p > 안녕하세요 . 제 이름은 { this .props.name} 입니다 . < /p> < p > 숫자 : { this .state.number} < /p> < button onClick = {() => { this .setState({ number : this .state.number + 1 }); }} > 더하기 < /button> < /div> ); } 01.5.3.4 state 값 업데이트 : setState()   게시글에서 클릭이벤트를 작성해 보았다. 사용법은 일반 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 사항이 몇 가지 있다. 01.6.1. 이벤트를 사용할 때 주의사항 01.6.1.1. 이벤트 이름은 camelCase로 작성 HTML 의 onclick 은 리액트에서 onClick 으로 작성해야 하고, onkeyup 은 onKeyUp 으로 작성해야한다. 01.6.1.2. 이벤트에 실행한 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 // HTML < button onclick = "" > // React <

React.js 01.5. Component 앞선  01.1/01.2 React JS 특징 및 설치환경  에서 설명했듯이 컴포넌트는 특정 부분이 어떻게 생길지 정하는 선언체이며, LifeCycle API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업을 처리할 수 있고, 메서드를 만들어 기능을 붙일 수도 있다. 리액트 프로젝트에서 서로 조합이 가능한, 모듈화된 컴포넌트를 사용해 만든다. 01.5.1. 컴포넌트 생성하기 01.5.1.1. 컴포넌트 초기 코드 생성 src 디렉터리 내부에 NewComponent.js 파일 생성 termianl이나 cmd에서 명령어를 이용해 만들어도 되고, VS Code 왼쪽 사이드바에 있는 파일 목록에서 마우스 오른쪽 클릭으로 새파일을 생성해도 된다. import React, { Component } from 'react' ; class NewComponent extends Component { render() { return ( < div > 새로운 컴포넌트 < /div> ); } } export default NewComponent; 01.5.1.2. 모듈 내보내기 및 불러오기 내보내기 export default NewComponent; 불러오기 // App 컴포넌트에서 생성한 NewComponent를 불러와 사용한다. import React, { Component } from 'react' ; import NewComponent from './NewComponent' ; class App extends Component { render() { return ( < NewComponent /> );