[React] Class Components와 State

class Components and state

state는 보통 동적 데이터와 함께 작업할 때 만들어진다.

Class 만들기

 

class App extends React.Component{
  render(){
    return <h1>Hi hello</h1>
  }
}

React.component는 return이 아닌 render method를 가지고 있다.

function component는 함수이고 return을 한다.
class component는 class이고 react component로 부터 extend된다.
그리고 render method안에 넣어야 한다.

 

Class에서 로컬 State 생성하기

 

class component안에서는 state를 사용할수 있음
state는 object, 동적인 데이터를 넣을 공간이다.

 

class App extends React.Component{
  state = {
    number : 0;
  }
  render(){
    return <h1>Hi hello {this.state.number}</h1>
  }
}

state라는 object안에 number을 넣어주었는데
this.state = {number : 0};으로 선언해 줘도 된다.

 

state안에 있는 내용을 불러오기 위해서는 function component와는 달리
{this.state.number}라고 선언해 주어야 한다.

 

 

버튼을 클릭하면 동적으로 데이터가 변경되고 변경된 내용으로 업데이트되는 코드를 짜보자.

 

class App extends React.Component{
  state = {
    number : 0
  };
  add = () => {
//add 클릭 시 나타나는 내용
  }
  reset = () => {
//reset 클릭 시 나타나는 내용
  }
  render(){
    return (
      <div>
        <h1>Count : {this.state.number}</h1>
        <button onClick={this.add}>Plus</button>
        <button onClick={this.reset}>Reset</button>
      </div>
    )
  }
}

여기서 button의 onClick은 리액트 전용이다.

<button onClick={this.add}> 버튼 클릭시 this.add를 실행한다는 뜻.

* 여기서 주의할점은 this.add 뒤에 괄호를 붙이면 클릭 후 실행이 아닌 즉시 실행이 되버린다.

 

그리고 화살표 함수를 쓰지 않으면 this.reset.bind(this)로 적어주어야 한다.

 

https://ko.reactjs.org/docs/handling-events.html
이벤트 관련된 것은 이 곳에서 자세히 볼 수 있음.

 

그럼 button 클릭시 number의 값을 변경해보자.

 

  add = () => {
    this.state.number = 1;
  }
  reset = () => {
    this.state.number = 0;
  }
//error

위와 같이 직접 변경하는 방법을 사용하려 할텐데,
state는 직접 값을 변경해선 안된다.
위의 코드는 컴포넌트를 다시 렌더링하지 않기 때문 (refresh가 안된다는 말)

수정을 하려면 setState를 사용해야 한다.

 

setState 사용

setState를 사용하면 호출할 때마다 new state와 함께 render function을 호출 하게 된다.

this.setState({ number: 1});

이런식으로 setState를 사용해야 변경되는 것을 확인할 수 있다.

하지만 this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에
state를 계산할 때 해당 this 값에 의존해서는 안된다.

 

this.setState(state => ({
   number : state.number + 1
}));

// 일반 함수에서도 작동가능

this.setState(fuction(state){
   return{
   number : state.number + 1 
   };
   
});

이렇게 setState에 인자를 받아서 사용하는 것이 좋다.

함수를 인자로 사용하는 형태의 setState()를 사용 방법.
state를 set할 때 react에서 외부의 상태에 의존하지 않는 방법.