const, state

App.js

import React, { Component } from "react";

class App extends Component {
  //키워드
  state = {
    name: "홍길동",
    nickname: "야식왕",
  };
  //그림을 그려주는 함수
  render() {
    const btnClick = () => {
      //this.state.nickname = "홈런왕";
      this.setState({
        nickname: "홈런왕",
      });
      //render가 재호출되지 않아서 뷰에서는 이전 닉네임으로 그대로 남아있음.
      console.log(this.state.nickname);
    };

    //this : 현재 클래스. function
    return (
      <div>
        <div>나의 이름은 {this.state.name} 입니다 .</div>
        <div>나의 별명은 {this.state.nickname} 입니다 .</div>
        <button onClick={btnClick}>닉네임 변경</button>
      </div>
    );
  }
}

export default App;

state에 변수가 있어야지 변수가 랜더링됨

단, 일반적으로 변수를 바꾸는건 안되고 setState가 있어야만 강제로 렌더링을 할 수 있음.

 

state 내부 변수 호출 시 this.state.(변수 이름)으로 호출

 

state는 component보다 App에서 관리