React Class Components & State

poburi FE·2020년 7월 7일

React State

React

목록 보기

3/10

다이나믹 데이터를 만들 때 state와 함께한다.
데이터라는건 있기도하고 없어지기도하고 0이기도하고 엄청 다양한 종류의 것들임.

고정적인 porps 대신 state가 필요한 이유다.
그러기 위해서는 state이외에도 class 컴포넌트가 필요하다.

클래스 컴포넌트에는 state가 있다

🌐 문법:

class 이름 extends React.Component{}

state는 가져온(=상속한) React.Component에 있다.

어떻게 동작할지...

function 컴포넌트 와 다르게 return 이 없다.
대신 class 컴포넌트 는 render 메소드를 가지고 있다.
⚠️ render 메소드 안에서는 return 사용할 수 있음

render(){}⁇

✡ 리액트는 자동적으로 모든 class 컴포넌트의 render메소드를 실행한다는 점!

State

state = object = 컴포넌트에 넣을 데이터 = 데이터 = 변한다

➡️ state = 변한다

내가 바꿀 데이터는, 변해야할 데이터는 state안에 넣자구.

class App extends React.Component {
  state = {
    count: 0
  };
  render(){
    return (
      <div>
        <h1>숫자: </h1>
        <button onClick={this.add}>+</button>
        <button onClick={this.minus}>-</button>
      </div>
    );
  }
}

정의한 state를 render(){}안에서 표현하려면 요로케:

class App extends React.Component {
  state = {
    count: 0
  };
  render(){
    return (
      <div>
        <h1>숫자: {this.state.count}</h1>
        <button onClick={this.add}>+</button>
        <button onClick={this.minus}>-</button>
      </div>
    );
  }
}

{this.state.count}를 JSX안에 표현해주면 된다.

메인 컴포넌트에서 어떻게 data를 바꿀 수 있을까?

바로, render(){} 업데이트를 통해서
바로, setState()를 통해서

🤷‍♀️

setState()는 새로운 state와 render()를 새롭게 호출한다.
이런 과정을 통해 우리는 data를 바꾸는 것.

Do not this (1) ⤵️

add = () => {
  this.state.count = 1;
};
minus = () => {
  this.state.count = -1;
});

⚠️ this.state.count = 1; 이런 행위로는 data를 바꿀 수 없다는 점.
↪️ Fix to setState({count=1;})

그러면 render(){}가 호출되면서 원하는 값으로 데이터를 변경해줄 것이다.

Do not this (2) ⤵️

add = () => {
    this.setState({
      count: this.state.count + 1
    })
  };
  minus = () => {
    this.setState({
      count: this.state.count -1
    })
  };

외부 state에 너무 의존하는 것은 좋지 않다.
리액트는 현재 state를 함수로 제공해주고 있다.

Do this ⤵️

 add = () => {
    this.setState(current => ({
      count: current.count + 1
    }))
  };
  minus = () => {
    this.setState(current => ({
      count: current.count -1
    }))
  };