ReactJS-컴포넌트 API
이 장에서는 React component API에 대해 설명합니다. 세 가지 방법에 대해 설명합니다.setState(), forceUpdate 과 ReactDOM.findDOMNode(). 새로운 ES6 클래스에서는이를 수동으로 바인딩해야합니다. 우리는 사용할 것입니다this.method.bind(this) 예에서.
상태 설정
setState()메서드는 구성 요소의 상태를 업데이트하는 데 사용됩니다. 이 메서드는 상태를 대체하지 않고 원래 상태에 변경 사항 만 추가합니다.
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
}
this.setStateHandler = this.setStateHandler.bind(this);
};
setStateHandler() {
var item = "setState..."
var myArray = this.state.data.slice();
myArray.push(item);
this.setState({data: myArray})
};
render() {
return (
<div>
<button onClick = {this.setStateHandler}>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
}
}
export default App;
우리는 빈 배열로 시작했습니다. 버튼을 클릭 할 때마다 상태가 업데이트됩니다. 다섯 번 클릭하면 다음과 같은 출력이 표시됩니다.
강제 업데이트
때로는 구성 요소를 수동으로 업데이트해야 할 수도 있습니다. 이것은forceUpdate() 방법.
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
};
forceUpdateHandler() {
this.forceUpdate();
};
render() {
return (
<div>
<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
<h4>Random number: {Math.random()}</h4>
</div>
);
}
}
export default App;
버튼을 클릭 할 때마다 업데이트되는 난수를 설정하고 있습니다.
Dom 노드 찾기
DOM 조작을 위해 다음을 사용할 수 있습니다. ReactDOM.findDOMNode()방법. 먼저 가져와야합니다react-dom.
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor() {
super();
this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
};
findDomNodeHandler() {
var myDiv = document.getElementById('myDiv');
ReactDOM.findDOMNode(myDiv).style.color = 'green';
}
render() {
return (
<div>
<button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
<div id = "myDiv">NODE</div>
</div>
);
}
}
export default App;
색상 myDiv 버튼을 클릭하면 요소가 녹색으로 변경됩니다.
Note − 0.14 업데이트 이후 대부분의 이전 컴포넌트 API 메소드는 ES6를 수용하기 위해 더 이상 사용되지 않거나 제거되었습니다.