[DEV] 리액트 03 - class & state

headerimg

경고

공부기록용임. 코드나 커리큘럼 방식 등 모든 지적 재산권은 노마드 코더에게 있으며, 무료로 볼 수 있으니 들어가서 여기서 공부할 것!! 갓 니콜라이 노마드 코더님 만세! https://academy.nomadcoders.co

Props

1. class & state state를 쓰기 위해선 이전에 쓰던 function component가 아닌 class component가 필요하다.

class App extends React.Component{
  // state는 object이고 여기 넣는 데이터는 변한다.
  state = {
    count: 0
  }
  // Ract는 자동적으로 class component의 render를 실행시킨다.
  render(){
    return <h1> count : {this.state.count}</h1>
    // 기본적으로 javascript class이니 this로 가져올 수 있다.
  }
}

기본적인 class component이다. class가 뭔지 모르겠다면 es06에 대한 강의를 봐야한다! 다음은 this.state.count를 증가 시킬 버튼과 함수를 만들어본다.

class App extends React.Component{
  state = {
    count: 0
  }
  add = () => {
    this.state.count += 1;
    // 이게 먹힐까?
  };
  minus = () => {
    this.state.count -= 1;
    // 이게 먹힐까?
  };
  render(){
    return (
      <div>
        <h1> The number is : {this.state.count}</h1>
        <button onClick={this.add}>add</button>
        <button onClick={this.minus}>minus</button>
      </div>
    )
  }
}

자 만들었다. 그럼 state를 변경하면 짠~ 되겠지! image

안된단다.. setState()를 사용하라고? 아 set get 말하는거군!
녀석 귀찮게 구는구나

state를 직접 변경하면 render function은 refresh 되지 않는다. 음.. OK state는 setState()로 바꿔야 render()가 DOM을 리프레쉬 하는구나. 거기다가 render() 함수는 똑똑해서 state가 변하는 부분만 바꿔준다.

image 세상 좋아졌네 신기하구먼..

angular ngModel이나 데이터 바인딩과 비슷하네! 이놈도 문제가 많아서 Mobx나 redux를 쓴다고 리액트 개발자가 짧게 알려준적이 있다.
이유는 차차 알아가겠지? 학습은 redux고 실 사용은 mobx를 쓴다는 팁도 받았다.

// 결론은?
class App extends React.Component{
  state = {
    count: 0
  }
  add = () => {
    // setState에서 current는 현재 상태를 받아온다.
    this.setState(current => ({count: current.count + 1 }))
  };
  // 이래도 되고~ 저래도되고 여튼 돌아간다.
  minus = () => {
    this.setState(function(current){
      return {count: current.count - 1}
    })
  };
  render(){
    return (
      <div>
        <h1> The number is : {this.state.count}</h1>
        <button onClick={this.add}>add</button>
        <button onClick={this.minus}>minus</button>
      </div>
    )
  }
}

© 2018. All rights reserved.

Powered by blowROCK