ReactJS-컴포넌트 API

이 장에서는 React component API에 대해 설명합니다. 세 가지 방법에 대해 설명합니다.setState(), forceUpdateReactDOM.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를 수용하기 위해 더 이상 사용되지 않거나 제거되었습니다.