[react] setState와 이벤트

props나 state의 값이 바뀌면 그 컴포넌트의 render함수가 다시 호출된다.
render함수가 가지고 있는 하위의 컴포넌트들의 각 render함수도 다시 호출된다.
즉 props나 state의 값이 바뀌면 화면이 다시 그려진다.

setState

• constructor 안에서 state값을 바꾸는 것은 가능 하지만 생성된 후 state값을 바꾸는 방법은 setState를 사용한다.

  this.state.mode = 'welcome'
  //안됨 -> 리액트 모르게 바꾸는 것 -> 렌더링이 안됨
  
  this.setState({
  	mode:'welcome'
  })
  //리액트에게 알려줘서 다시 렌더링된다.
  

  setState를 하면 render가 호출된다. => 화면 다시 그린다.

• 주의할 점

  render함수 안에서 this는 컴포넌트 자체를 가르키지만 이벤트 (onClick)함수 안에서 this는 아무것도 가르키지 않기 때문에 onClick함수를 bind로 this를 바인딩 해주어야 한다.

  또한가지 방법은 화살표함수를 사용하면 bind하지 않아도 사용 가능(화살표함수에서 this는 상위 태그를 가르키기 때문)

  onChange = (e) => {}

  참고: render 태그 안에 html태그에 js태그는 따로 분리해주는게 좋은데 분리한 메서드는 화살표 함수로 해야 this가 바뀌지 않는다.

  this.setSTate(current => ({ count : current.count - 1 })

  위 코드처럼 setState의 첫번째인자인 current는 현재 state의 값을 사용할 수 있다.(set하기 전의 state값) this.state로 current state의 값을 사용하는 것 보다 setState의 첫번째 인자를 사용하자!

  이벤트

• App이라는 상위 컴포넌트에서 이벤트 핸들러 정의 시 아래 onChangePage처럼 이벤트를 정의한다

       <Subject 
     title={this.state.subject.title} 
     sub={this.state.subject.sub}
     
     onChangePage={function(){
       this.setState({mode:'welcome'})
      }.bind(this)}>
     </Subject>

  하위 컴포넌트인 Subject에서 이벤트 핸들러를 달아주는 방법은 아래와 같이 한다

     class Subject extends Component {
    render(){
      return (
        <header>
          <h1><a href="/" onClick={function(e){
              e.preventDefault();
              
              this.props.onChangePage();
              
          }.bind(this)}>{this.props.title}</a></h1>
        </header>
      )
    }
  }

  input의 이벤트

• input창의 값도 바뀌는 state이다. 때문에 onChange이벤트를 설치해주지 않으면 input창에 값을 입력 할 수가 없다. (onChange 또는 readOnly)

  <input type="number" value={this.state.value} 
         onChange={(e) => this.setState({value: e.target.value})} />

  위처럼 해줘야 값을 입력 할 수있다. (참고로 number가 타입이므로 number만 입력 가능)

  shouldComponentUpdate

  shouldComponentUpdate(newProps, newState){
  return false
  }

  -> shouldComponentUpdate함수가 render보다 먼저 실행되는데 return값을 false로 주면 render함수는 실행이 안된다.

  -> 인자로 새로 바뀐값을 볼 수 있으며 기존값은 this.props.[이름]
  이런식으로 조회 가능하다.

• 참조 : 생활코딩