React : setState에 객체 대신 함수 전달하기!

setState를 사용해서 값을 업데이트 할 때!

기존의 값을 참고해서 값을 업데이트 하게 될 때!

좀 더 나은 문법으로 할 수 있어!

 

기존에 작성했던 코드가 이랬지?

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

큰 문제는 아니지만, 또 this.state를 조회 하고 있어!

 

이렇게 바꿔보자!

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

setState에 updater 함수를 만들어서 전달했어!

 

좀 더 나아가서!

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

보면 (state)가 ({ number }) 가 됐지? 이건 '비구조화 할당' 이라는 문법이야(아놔........................)

 

이 문법은 이런식으로도 사용 할 수 있어!

const { number } = this.state;

 

코드를 더 줄이고 싶다면 이렇게도 할 수 있지!

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

 

어떤 코드가 제일 맘에 들어?

원하는 방향으로 사용 해!

 

그러면 기존에 작성했던 함수를 각각 다른 방식으로 구현 해보자고!

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

handleDecrease = () => {
  this.setState(
    ({ number }) => ({
      number: number - 1
    })
  );
}

 

 

참조: velopert.com/3629