React STEP 15 - State - 1

⭐ State

• props를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용 했다면, state는 하나의 컴포넌트 안에서 전역 변수처럼 사용합니다.

1. state 사용하기

class State extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      stateString : props.program,
      stateVersion: "18.2.0"
    };

  }

  render() {
    return (
      <div>
        {this.state.stateString} {this.state.stateVersion}
      </div>
    )
  }
}

class App2 extends React.Component {
  render() {
    let h1Style = {
      fontWeight: "normal"
    }

    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <State program="React"></State>
      </div>
    )
    
  }
}

root.render(
  <App2></App2>
)

• 해석 

 this.state={
    stateString: props.program,
    stateVersion: "18.2.0"
 }
가장 먼저 실행되는 생성자 함수 constructor 안에서 state의 초깃값을 정의해야 합니다. stateString 
state에는 props 값을 저장하고 stateVersion state에는 문자 '18.2.0'을 저장합니다.

 {this.state.stateString} {this.state.stateVersion}
 this.state.변수명 문법으로 state에 접근합니다. state 값을 화면에 그대로 표시합니다

 

2. setState() 함수 사용하기

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

class State2 extends React.Component {
  constructor(props) {
    super(props);

    this.state={
      stateString : "React"
    }; 
  }

  stateChange=flag => {
    if(flag === "direct") this.state.stateString="React 17.0.2";
    if(flag === "setstate") this.setState({stateString: "React 18.2.0"});
  }

  render() {
    let buttonStyle = {
      marginRight: 5,
      marginTop: 20,
      padding: 10,
      fontSize: 14,
      backgroundColor: "#999",
      color: "#fff",
      border: "none",
      cursor: "pointer"
    };

    return (
      <div>
         <button onClick={() => this.stateChange("direct")} style={buttonStyle}>state 직접 변경</button>
                <button onClick={() => this.stateChange("setstate")} style={buttonStyle}>setState() 함수로 변경</button>
                <p>stateString : {this.state.stateString}</p>
      </div>
    )
  }
}

class App3 extends React.Component {
  render(){
      let h1Style={
          fontWeight: "normal"
      }
      return(
          <div>
              <h1 style={h1Style}>React Example</h1>
              <State2 />
          </div>
      );
  }
}

root.render(
  <App3 />
)

• 해석

if(flag === "direct") this.state.stateString="React 17.0.2";
[state 직접 변경] 버튼을 눌렀을 때 this.state.변수명=값 문법으로 state를 직접 변경하려고 합니다. 
이때 stateString 값은 'React 18.2.0'으로 변경되지만 render() 함수를 호출하지 않으므로 화면에는 
이전 값인 'React'로 표시됩니다.

if(flag === "setstate") this.setState({stateString: "React 17.0.2"});
[setState() 함수로 변경] 버튼을 눌렀을 때 setState() 함수로 state를 변경합니다. 이때 stateString 
값은 'React 18.2.0'으로 변경되고 render() 함수를 다시 호출해 화면에는 변경된 값으로 표시됩니다

 

3. state를 직접 변경한 후 forceUpdate() 함수 사용하기

• this.state.변수명 = 값 과 같이 직접 state를 변경하면 render() 함수를 호출하지 않으므로 화면에 보이는 state 값은 바뀌기 전 상태로 남게 됩니다.
• 이때 forceUpdate() 함수로 화면을 새로 고침하면, render() 함수를 호출해 변경된 값을 화면에 보여줄 수 있습니다.

class State3 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      stateString : "React"
    };
  }

  stateChange= () => {
    this.state.stateString = "React 18.2.0";
    this.forceUpdate();
  }

  render() {
    let buttonStyle = {
      marginRight: 5,
            marginTop: 20,
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
    }

    return (
      <div>
        <button onClick={() => this.stateChange()} style={buttonStyle}>state 직접 변경</button>
        <p>stateString : {this.state.stateString}</p>
      </div>
    )
  }
}

class App4 extends React.Component {
  render(){
      let h1Style={
          fontWeight: "normal"
      }
      return(
          <div>
              <h1 style={h1Style}>React Example</h1>
              <State3 />
          </div>
      );
  }
}

root.render(
  <App4 />
)

• 해석

stateString : {this.state.stateString}
state인 stateString의 초깃값으로 'React' 문자열을 저장했습니다. constructor() 함수가 실행되고 
render() 함수에서 화면을 그리기 때문에 {this.state.stateString}은 'React'로 표시됩니다.

this.state.stateString="React 17.0.2";
[state 직접 변경] 버튼을 눌렀을 때 this.state.변수명=값 문법으로 state를 직접 변경합니다. 이때 
stateString 값은 "React 18.2.0"으로 변경됩니다.

this.forceUpdate();
forceUpdate() 함수는 화면을 강제로 새로 고침하기 때문에 render() 함수를 다시 실행시켜 화면에 
변경된 state 값을 표시할 수 있습니다