setState() 함수 사용하기

setState() 함수 사용하기

this.state.변수명=value와 같이 state를 직접 변경하면 render() 함수를 호출하지 않으므로 화면에 보이는 state 값은 바뀌기 전 상태로 남게 된다. setState() 함수로 state를 변경해야 render() 함수를 호출해 변경된 값을 화면에 보여줄 수 있다.

 

예제코드

App.js

import React from 'react';
import './App.css';
import SetState from './R025_SetState.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <SetState/>
    </div>
  );
}

export default App;

R025_SetState.js

import React, {Component} from "react";

class R025_SetState extends Component {
  constructor(props) {
    super(props);
    this.state = {
      StateString: 'react',
    }
  }

  StateChange = (flag) => {
    if(flag === 'direct') this.state.StateString = '리액트';
    if(flag === 'setstate') this.setState({StateString : '리액트'});
  }

  render() {
    return(
      <div style={{padding: "0px"}}>
        <button onClick={(e)=>this.StateChange('direct',e)}>
          state 직접 변경</button>
        <button onClick={(e)=>this.StateChange('setstate',e)}>
          setState로 변경</button><br/>
          [state 변경하기] StateString : {this.state.StateString}
      </div>
    )
  }
}

export default R025_SetState;

 

참고사항

• 직접 바꾸지말고 setState를 사용하자

 

코드해설

Line7

• state 변수 StateString의 초기값으로 react라는 문자열을 저장했다. constructor() 함수가 실행되고 redner() 함수에서 화면을 긔기 때문에 {this.state.StateString}은 react로 표시된다.

Line 19~20

• [state 직접변경] 버튼을 눌렀을 때, this.state.변수명=value 문법으로 state를 직접 변경한다. 이때 StateString 값은 ‘리액트’로 변경되지만 render() 함수를 호출하지 않으므로 화면에는 이전 값인 ‘react’로 표시된다.

Line 21~22

• [setState로 변경] 버튼을 눌렀을 때 setState() 함수로 state를 변경한다. 이때 StateString 값은 ‘리액트’로 변경되고 render() 함수를 다시 호출해 화면에는 변경된 값인 ‘리액트’가 표시된다.

 

결과화면