Component Callback&event handling

> 콜백 함수로 프로퍼티 수정

class App extends React.Component {   constructor(props) {     super(props);     this.state = {       count: 1,     };     this.increateCount = this.increateCount.bind(this);   }   increateCount() {     this.setState(({ count }) => ({ count: count + 1 }));   }   render() {     return <Counter count={this.state.count} onAdd={this.increateCount} />;   } } export default App;

 

on add 부분에서 에러가 발생한다 (TypeError:this.setStateis is not a function)

해당 Code의 this는 "Counter" Component을 가리키므로 상위 컴포넌트인 App에서 정의한 내용을 가리키지 않아 this범위 오류에 속한다.

이러한 문제를 해결하기 위해선 bind() 함수를 이용하여 this 범위를 지정할 수 있다.

 

또한 이벤트의 경우 함수가 호출 될 때, this는 호출부에 따라 결정되므로 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어져 버린다.

 

onAdd={this.increateCount.bind(this)}

 

해당 부분에 써도 되지만, 그렇게 되면 호출할 때 마다 불필요하게 호출되는 경우가 생기기에 생성자 안에서 묶어 사용할 수 있다.

this.increateCount = this.increateCount.bind(this);

 

또한 새 메서드를 만들 때 마다 생성자에서 bind하는 것도 귀찮다면 바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의해도 된다.

 

increateCount = () => {     this.setState(({ count }) => ({ count: count + 1 }));   };

 

> input 다중 제어

event 객체인 e.target.name 값을 사용하여 state를 설정하면 가능하다.

 

handleChange = (e) => {     this.setState({       [e.target.name]: e.target.value,     });   };

 

setState()를 이용하여 input 이라든지의 요소 안에서 해당 레퍼런스가 가리키는 실제 값을 변경하여 저장한다.

 

> 컴포넌트에서 DOM 객체 함수 사용하기

Component 안에서 window.addEventListener() 함수와 같은 DOM 객체 함수를 사용하기 위해선 DOM 객체를 컴포넌트 변수로 할당해야 하는데, 이때 특수 property인 ref를 사용한다.

해당 property는 document.getElementById()와 동일한 객체를 반환한다. 해당 객체 함수가 필요한 element에 대해서만 콜백 함수 형태로 전달된다.