클래스형 컴포넌트와 state

⚡클래스형 컴포넌트의 state

 

import { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }
  render() {
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

예제코드입니다.

 

 

⚡super(props)

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }

컴포넌트에 state를 설정할 때는

위와 같이 constructor 메서드를 이용해 작성합니다.

또한 클래스형 컴포넌트에서 constructor를 작성할 때는

반드시 super(props)를 호출해주어야합니다.

 

🤪super()?

이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의
component 클래스가 지닌 생성자 함수를 호출해줍니다.

그리고 this.state 값에 초기값을 설정해주었습니다.

컴포넌트의 state는 객체 형식이어야해요!

render() {
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

setState는 state객체에 대한 업데이트를 실행해주며

state가 변경되면 컴포넌트는 리렌더링됩니다.

onclick 이벤트가 발생했을때 setState의 number를 1씩 증가시켜주는 코드군용

 

---

 

 

🔍state 객체 안에 여러 값이 있을 때

 

import { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
      fixedNumber: 0,
    };
  }
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>바뀌지않는값: {fixedNumber}</h2>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

state를 조회할때는 this.state로 조회합니다.

setState를 할 때도 this.setState를 사용해야하는군요

 

---

 

🔍state를 constructor에서 꺼내기

 

state의 초깃값을 지정하기 위해 위 예제에서는 constructor 메서드를 선언했는데

다른 방식으로도 state의 초깃값을 지정할 수 있습니다.

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

개인적으로는 이 방법이 훨씬 편리해보이네요

 

---

🔍this.setState에 객체 대신 함수 인자 전달

        <h1>{number}</h1>
        <h2>바뀌지않는값: {fixedNumber}</h2>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
            this.setState({ number: this.state.number + 1 });
          }}
        >
          +1
        </button>

만약 이렇게 onclick이벤트가 발생했을때

this.setState를 두번 호출하면 어떻게 될까요?

 

의외로 1씩 증가합니다

this.setState를 사용한다고해서 state값이 바로 바뀌지 않기 때문이에요

 

이걸 해결하려면  this.setState를 사용할 때 객체 대신에 함수를 인자로 넣어주면 됩니다.

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

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

위의 return이 있는 함수코드와

아래의 return 없는 함수코드는 완전히 똑같은 기능을 수행합니다.

다만 아래 코드는 함수에서 바로 객체를 반환한다는 의미를 가집니다.

 

이렇게 함수로 만들어서 사용하면 숫자가 2씩 올라가네요

---

🔍this.setState가 끝난 후 특정 작업 실행하기

      <div>
        <h1>{number}</h1>
        <h2>바뀌지않는값: {fixedNumber}</h2>
        <button
          onClick={() => {
            this.setState(
              {
                number: number + 1,
              },
              () => {
                console.log("방금 setState가 호출되었습니다");
                console.log(this.state);
              }
            );
          }}
        >
          +1
        </button>
      </div>

setState를 사용하여 값을 업데이트하고 난 다음에 특정 작업을 하고 싶을 때는

setState의 두번째 파라미터로 콜백 함수를 등록해서 작업을 처리할 수 있습니다.

 

위 코드를 실행시키면

number가 증가하고

콘솔창에 콘솔로그가 찍히는걸 확인할 수 있네용

---