React - State

state

• 컴포넌트에서 내부에서 변경될 수 있는 값
• 이 값이 변경될 때마다 리 렌더링 됨
• 값을 변경할 때는 반드시 setState() 함수(메소드) 사용
• setState() 함수 사용하지 않고 직접 변경하면 리 렌더링 하지 않음
• state 선언
  • state = { number:0 }
• state 사용
  • { this.state.number }
  • 반드시 this 붙임
• setState() 함수 사용해서 변경
  • this.setState( { number: this.state.number + 1 } );
• props와 state 비교
  • props : 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 값, 읽거 전용
  • state : 컴포넌트 자신이 갖고 있는 값, 변경 가능

state 예제 - Counter.js, App.js

class Counter extends Component {
    state = {
        number : 0
    }
    // 여기에 이벤트 핸들러 삽입
    increaseCounter = () => {
        // state 값 1 증가
        // state 값 변경할 때는 this.setState() 사용
        this.setState({
            number : this.state.number + 1
        });
    };
    decreaseCounter = () => {
        // state 값 1 감소
        this.setState({
            number : this.state.number - 1
        });
    };
    render() {
        return (
            <div>
                <h2>카운터</h2>
                <div>값 : {this.state.number}</div>
                <button onClick={this.increaseCounter}> + </button> &nbsp;
                <button onClick={this.decreaseCounter}> - </button> &nbsp;
                {/* 버튼에 직접 함수 포함 가능 */}
                <button
                onClick = { () => {
                    this.setState({
                        number : this.state.number + 10
                    })
                }}>
                 + 10 </button> &nbsp;
                <button
                onClick = { () => {
                    this.setState({
                        number : this.state.number - 10
                    })
                }}>
                 - 10 </button>
            </div>
        );
    }
}

class App extends Component {
  render() {
    return (
      <div className='App'>
        <h1>State 연습</h1>
        <Counter></Counter>
      </div>
    );
  }
}