State란?

<aside> 🔥 state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

리액트에는 두가지 종류의 state가 있다.

• 클래스형 컴포넌트가 가지고 있는 state
• 함수형 컴포넌트에서 사용되는 useState </aside>

클래스형 컴포넌트에서 state 사용

<aside> 🔥 state를 설정할 때는 constructor를 작성해야한다.

super(props)를 호출해서 현재 컴포넌트가 상속받고 있는 생성자 함수를 호출한다.

컴포넌트의 state는 객체 형식이어야 한다.

</aside>

class Counter extends Component {
  constructor(props) {
    super(props);

    // state 초기값 설정.
    this.state = {
      number: 0,
    };
  }

<aside> 🔥 this.setState()를 사용해서 state를 변경할 수 있다.

</aside>

render() {
    // this.state로 state 조회
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        {/* this.state를 통해 state를 조작할 수 있다. */}
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
        <button
          onClick={() => {
            this.setState({ number: number - 1 });
          }}
        >
          -1
        </button>
      </div>
    );
  }

<aside> 🔥 버튼을 클릭하여 state를 변경할 수 있다.

</aside>

<aside> 🔥 constructor에서 state 꺼내기

다음처럼 state를 작성할 수도 있다. 훨씬 편해 보인다.

</aside>

class Counter extends Component {
  state = {
    number: 0,
  };

<aside> 🔥 this.setState에 객체 대신 함수 인자 전달하기.

prevState는 기존 상태를 의미하고 props는 현재 지니고 있는 props를 가리킨다.

아래 코드는 위의 코드와 동일한 기능을 한다.

</aside>

<button
          onClick={() => {
            this.setState((prevState, props) => {
              return {
                number: prevState.number + 1,
              };
            });
          }}
        >
          +1
        </button>