리액트 #06 - Component API

이번에는 Component API 중

setState(), forceUpdate(), 그리고 ReactDOM.findDOMNode()라는 메소드에 대해서 알아보자.

setState

---

setState는 state를 변경할 때 사용합니다.

기존의 state를 대체하는 것이 아닌, 기존의 state에 변화를 줍니다.

App.js

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;

      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

---

forceUpdate는 갱신하고 싶을 때 사용합니다.

App.js 

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;

- 실행 화면 (버튼 누르기 전)

- 실행 화면 (버튼 누른 후)

findDOMNode

---

findDOMNode 는 그냥 자바스크립트 DOM을 사용할 수 있다고 생각하면 됩니다.

App.js

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;

- 실행 화면 (버튼 누르기 전)

- 실행 화면 (버튼 누른 후)