3.4 State Functions

우리가 useState를 이용하는 방법에는 2가지 방법이 있다.

 

첫번째는 이전 포스트에서처럼 원하는 값을 직접 지정하는 방법이고,

두번째는 state 함수를 전달하는 방법이 있다.

 

1. 원하는 값을 직접 지정하기.

setCounter( counter + 1 );

 

2. 함수를 전달하기

setCounter((current) => current + 1);

첫번째 argument = 현재 값을 의미하고,

이 함수의 return 값(arrow function 뒤에 나오는 값)이 새로운 state가 된다.

 

이 방법이 1번의 방법보다 더 안전하다.
왜냐하면, 리액트가 우리가 정확히 원하는 값으로 계산할 수 있도록

첫번째 argument가 확실히 현재 값이라는 것을 보장하기 때문이다.

 

현재 state를 기반으로 계산을 하고 싶다면, 위와 같이 arrow function을 이용하는 것이 좋다.
그래서 다음 state 값이 현재 값을 바탕으로 나올 수 있도록 하면 된다.

※ 정리 :
현재 state를 바탕으로 다음 state를 계산해내고 싶다면,
state 함수(arrow function)을 사용해야 한다.
이 방식이 현재 state인 현재 counter 값을 줄 것이고,
예상치 못한 업데이트가 어디선가 일어났다고 해도, 그로 인한 혼동을 주는 것을 방지할 것이다.