[React] 일반형 & 함수형 업데이트 #useState

useState로 값을 업데이트 하는 방식은 일반형과 함수형 두 가지가 있다. 

 

💡 (1) 일반형 업데이트

count 값에 +1 을 더해주는 간단한 예시 코드 

const [count, setCount] = useState(0);

setCount(count + 1); // 일반형

많이 사용되는 방법이고 간결하다. 하지만 하나의 함수에서 여러번의 값이 변경되어야 할 때 문제가 생길 수 있다. 다음 코드를 봅시다. 

 

const [count, setCount] = useState(0);

/* 어쩌구 저쩌구 코드들 */

<button onClick={() => {
    setCount(count + 1); 
    setCount(count + 1);
    setCount(count + 1); 
}}>+3</button>

버튼을 한 번 클릭할 때마다 `count + 1` 을 총 3번 실행한다. 첫 번째 실행될 때 `0 + 1 = 1` , 두 번째 `1 + 1 = 2` 세 번째 `2 + 1 = 3` 최종 결과가 3이 나올 것만 같은 기분이 든다. 하지만 실제로는 그렇게 동작하지 않는다. 왜냐하면 state는 일괄 (batch) 처리를 하기 때문이다. React는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. 즉, 리렌더링은 onClick이 끝나고 일어난다. 

 

다시 말해 첫 번째, 두 번째, 세 번째 모두 count가 0인 상태에서 참조를 하는 것과 마찬가지이다. 실제로는 아래와 같이 동작한다. 

<button onClick={() => {
    setCount(0 + 1); 
    setCount(0 + 1);
    setCount(0 + 1); 
}}>+3</button>

 

`count`가 아직 업데이트 되기 전인 `0` 을 모두 참조하게 되는 것이다.

 

그리고 가장 마지막에 계산된 결과가 저장된다. 

<button onClick={() => {
    setCount(0 + 10000); 
    setCount(0 + 100000000);
    setCount(0 + 1); 
}}>+3</button>

위의 이벤트가 끝나고 리렌더링 되면 숫자 `1` 이 보일 것이다. 쉽게 말해 일반형 업데이트는 이전 state의 계산결과를 참조하지 않고 덮어쓰는 개념이다. 

---

💡 (2) 함수형 업데이트

그럼 여러번 값이 변경되고 이전 값을 참조해서 계산해야 하는 경우에는? 함수형 업데이트를 사용하면 된다. 계산을 통해 로직이 업데이트 될 때 사용하거나, 동시다발적으로 데이터의 업데이트가 되고, 항상 최신값을 바라볼 수 있도록 사용하는 방법이다. 

 

함수형 업데이트 예시

const [count, setCount] = useState(0);

<button onClick={() => {
    setCount((n) => {
      return n + 1
    }); 
    setCount(n => n + 1);
    setCount(n => n + 1);
}}>+3</button>

setCount내 콜백함수를 호출한다. 이 때 콜백함수의 매개변수로는 state의 이전값('prev')을 받는다.  여기서 이전값은 0으로 초기화된 값이 아닌, 이전에 계산된 `0+1`, `1+1`... 의 결과값을 항상 최신으로 받는다는 의미이다.  왜 그런가 하면 클로저 어쩌구 저쩌구, 큐 어쩌구 저쩌구의 개념이다. 

 

정리해보자면 흔한 사례는 아니지만 다음 렌더링 전 동일한 staet 변수를 여러 번 업데이트 하고 싶을 때 state값을 바로 호출하는 대신, `setCount(n => n + 1)`과 같이 큐의 이전 state를 기반으로 다음 state를 계산하는 콜백 함수를 전달할 수 있다.

---

📍 최종 정리

• state의 값을 업데이트 하는 방법으로는 일반형, 함수형 업데이트가 존재한다. 
• 보통의 경우 일반형으로 처리하면 된다. 
• 리렌더링 전에 동일한 staet 변수를 여러 번 업데이트하는 경우 함수형 업데이트를 사용하면 된다. 
• 함수형 업데이트만 사용해도 문제는 없으나 가독성이 안좋아질 수 있으니 알맞는 상황에 맞게 구분하여 사용하자.

 

참고 - react 공식 문서

여러 state 업데이트를 큐에 담기 – React