* 김민준 저자님의 <리액트를 다루는 기술> 책을 보고 정리해 놓은 글입니다. 가볍게 일독을 마친 상태이고 모르는 부분 위주로 정리하고 구글링을 해서 도움이 되는 자료를 정리하겠습니다.
1. 이벤트
- 사용자가 웹브라우저에서 DOM 요소들과 상호작용을 하는 것
-> form 요소는 값이 바뀔때 onchange 이벤트를 실행
2. 규칙
1) 이벤트 이름은 carmel case로 한다.: 낙타모양의 명명규칙
2)이벤트 실행할 자바스크립트 코드 전달이 아니고 함수 형태의 값을 전달
3) DOM 요소에만 이벤트 설정 할 수 있음
- div, button, input, form , sapn 등
3. 이벤트 실행
- <MyComponent onClick={doSomething}/>
->doSomething 함수를실행하는 것이 아니라 그냥 이름이 onClick인 props를 전달 받음
-> <div onClick={this.props.onClick}>
4. 실습순서
1) 컴포넌트 불러오기
2) onChange 이벤트 핸들링
3) 임의 매서드 만들기
4) input 여러개 다루기
5) onKeyPress 이벤트 핸들링하기
5. onChange 이벤트 설정
<input
onChange={ (e) => { console.log(e);}} />
- e 객체는 syntheticEvent(synthetic:인조) 웹브라우저의 네이티브 이벤트를 감싸는 객체
- 네이티브 이벤트와 인터페이스가 같음.
- e.target.value : 앞으로 변할 인풋값
6. state에 인풋값 담기
- construtor 생성자 매서드에서 state 초기값을 설정
- 이벤트 핸들링 함수 내부에서 this.state 매서드를 호출하여 state를 업데이트
- state = { message: '' }
- value = {this.state.message}
- (e) => { this.setState({message: e.target.value})
* 이렇게 하니 message라는 alias를 생기게 할 수 있음
- 메시지를 띄운후 comment 값을 공백으로 변경
- alert(this.state.message)
-this.setState({message:''})
7. 임의 매서드 만들기
- 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태를 전달
- 랜더링을 하는 동시에 함수를 만들어서 전달
- 함수를 미리 만들어서 전달하는 방법도 있음
- 생성자를 하는 이유가 props의 값을 세팅?
- handleChange(e) {
this.setState({ message: e.target.value})
- onChange = {this.handleChange}
- 컴포넌트에 임의매서드를 만들면 this로 접근이 안됨
-> 각 매서드를 this와 바인딩을 해주어야 함
8. property initializer syntax 사용한 매서드 작성
- 매서드 바인딩은 constructor 생성자에서 하는것이 정석
- 하지만 Arrow 함수 형태로 하게 되면 이부분이 해결된다.
- handleChange = (e) => {this.setState({ e.target.value}); }
-> Arrow 함수를 이용하게 되면 생성자 함수를 통해서 바인딩을 하지 않아도 됨
9. input 여러개 핸들링
- event 객체를 활용
- handleChange = (e) =>{this.setState({ [e.target.name]:e.target.value});}
"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"