이벤트 핸들링
2022-06-13
리액트 이벤트는 HTML 이벤트리스너의 캐멀 케이스 버전을 사용
기본적으로 클래스 내부 함수는 바인딩 되어있지 않음
.bind(this)로 this가 window 또는 undefined가 아닌 클래스로 바인딩시켜야 함
// html
<button onclick={onClickFunction()}></button>
// JSX
<button onClick={this.onClickFunction.bind(this)}></button>
<input onInput={this.onInputFunction.bind(this)}
onChange={this.onChangeFunction.bind(this)} />
내부 함수 binding을 constructor 에서도 할 수 있음
constructor(props){
...
this.onClickFunction = this.onClickFunction.bind(this);
}
render(){
return(
<button onClick={this.onClickFunction}></button>
)
}
4. 함수형 컴포넌트와 클래스 컴포넌트
- 리액트가 함수형 컴포넌트를 권장함.
- CRA 역시 처음 install 시 샘플 컴포넌트가 함수형으로 되어있음.
- 커리큘럼 중 2) hook은 함수형 컴포넌트, 3) 생명주기는 클래스 컴포넌트
차이점
-
클래스 컴포넌트
- class 키워드로 선언
- 생명주기 함수 사용 작성 가능
- render() 함수를 사용하여 JSX 반환
-
함수형 컴포넌트
- 함수로 선언
- 생명주기 함수, state 사용 불가능
- Hook으로 해결
- return 문으로 JSX 반환
1. 클래스 컴포넌트의 특징
1) 기본 구조
class App extends React.Component {
// 생성자
constructor(props){
super(props);
this.state = {
...
};
}
// 컴포넌트 내부 함수
functionA() {
...
}
functionB(args) {
...
}
// 렌더 함수 = 가상 DOM에 그려질 영역
render() {
return (
<div>
...
</div>
)
}
}
2) constructor
- constructor 내부에서 state를 정의하여 사용함
constructor(props){ super(props); this.state = { data1: ..., data2: ..., ... }; }
3) this 참조
- state (+setState), props, refs
- 컴포넌트 메서드
- 생명주기 매서드
onClickAddIsState () {
this.setState({
isState: this.state.isState + 1
})
}
render(){
return (
<div className="App">
<HelloWorld
notState={this.notState}
isState={this.state.isState}
list={this.state.list}
addList={this.onClickAddList.bind(this)}
></HelloWorld>
</div>
)
}
4) 클래스 내부 함수 bind
constructor(props){
...
this.onClickMethod = this.onClickMethod.bind(this);
}
onClickMethod() {
// do something
}
render(){
return(
<div>
<button onClick={this.onClickMethod}></button>
</div>
)
}