[React] this.setState에 객체 대신 함수 인자 전달하기&this.setState가 끝난 후 특정 작업 실행하기

👉 this.setState에 객체 대신 함수 인자 전달하기

this.setState를 사용해 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트 됨. 만약 onClick에 설정한 함수 내부에서 this.setState를 두 번 호출한다면?

• Counter.jsx-button onClick

onClick={() => {
  // this.setState를 사용하여 state에 새로운 값을 넣을 수 있음
  this.setState({ number: number + 1 });
  this.setState({ number: this.state.number + 1 });
}}

this.setState를 두 번 사용하는 것임에도 불구하고 버튼을 클릭할 때 숫자가 1씩 더해짐. this.setState를 사용한다고 해서 state 값이 바로 바뀌지는 않기 때문! 이 문제는 this.setState를 사용할 때 객체 대신에 함수를 인자로 넣어주면 해결됨.

• this.setState의 인자로 함수를 넣어 줄 때는 코드 형식
  • prevState → 기존 상태
  • props → 현재 지니고 있는 props로 만약 업데이트하는 과정에서 props가 필요하지 않으면 생략 가능
    
    

this.setState((prevState, props) => {
return {
  // 업데이트하고 싶은 내용
}
})

(+) 화살표 함수에서 값을 바로 반환하고 싶다면?

코드 블록 { }를 생략하면 됨.

• 예제
  파라미터 a와 b를 받아 와서 합을 구해 주는 함수를 작성하고 싶을 때

const sum = (a, b) => a + b;

• Counter.jsx-button
  this.setState 함수를 사용할 때는 화살표 함수에서 바로 객체를 반환하도록 했기 때문에 prevState => ({ })와 같은 형태로 코드가 이루어진다.

<button
  // onClick을 통해 버튼이 클릭되었을 때 호출할 함수 지정
  onClick={() => {
    this.setState(prevState => {
      return {
        number: prevState.number + 1
      };
    });
    // 위 코드와 아래 코드는 완전히 똑같은 기능을 함
    // 아래 코드는 함수에서 바로 객체를 반환한다는 의미!
    this.setState(prevState => ({
      number: prevState.number + 1
    }));
  }}
>
  +1
</button>

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

setState를 사용하여 값을 업데이트하고서 특정 작업을 하고 싶을 땐, setState의 두 번째 파라미터로 콜백(callback) 함수를 등록해 작업을 처리할 수 있음.

• Counter.jsx-button

<button
  // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정
  onClick={() => {
    this.setState(
      {
        number: number + 1
      },
      () => {
        console.log('방금 setState가 호출되었습니다.');
        console.log(this.state);
      }
    );
  }}
>
  +1
</button>