리액트에서 "함수형 업데이트"를 사용하는 이유 () =>

 

React에서는 상태 값을 직접 수정하지 않고, 항상 "함수"를 통해 새로운 값을 계산하도록 권장한다. 함수형 업데이트는 이런 철학을 따른다.

 

1. 상태를 기존 값 기반으로 안전하게 계산하기 위해

2. React의 비동기적 상태 업데이트 특성을 안정적으로 처리하기 위해

 

함수형 업데이트 사용 예시

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

// 함수형 업데이트 사용
setCount((prevCount) => prevCount + 1);

 

 

함수형 업데이트를 사용하는 이유

 

보통 React의 상태 업데이트는 아래와 같이 단순한 값을 넘겨주는데

setCount(count + 1);

 

이때, count는 현재 컴포넌트 렌더링에서 고정된 값이다.

하지만 React의 상태는 비동기적으로 작동하기 때문에 상태가 즉시 업데이트되지 않는다.

 

예를 들어

setCount(count + 1);
setCount(count + 1);

 

위의 코드는 count를 2번 증가 시켜야 하지만 예상된 결과가 나오지 않을 수 있다.

왜냐하면, setCount를 호출할 때 React는 아직 첫 번째 업데이트를 처리 중 이기 때문에 두 번째 setCount가 기존 값(count)에만 의존하게 된다.

const handleClick = () => {
  setCount(count + 1); // 현재 count = 0
  setCount(count + 1); // 여전히 count = 0 (React는 아직 첫 번째 업데이트를 처리 중)
};

 

 

작동방식

• React는 상태 업데이트 요청을 처리하기 위해 업데이트를 큐(queue)에 쌓는다.
• 상태가 즉시 변경되는 게 아니라, 렌더링이 끝날 때 업데이트를 일괄처리한다.
• 따라서, 두 번째 setCount(count + 1)를 호출할 때도 여전히 count는 첫 번째 업데이트 전의 값(0)으로 계산된다.
• 결과적으로 count가 두번 호출되었지만 위 결과는 1이 된다.

 

 

 

이런 문제를 해결하기 위해 React에서 "함수형 업데이트" 방식을 제공한다.

setCount((count) => count + 1);

 

위와 같이 함수형 업데이트 방식을 사용하면 React가 count에 최신 상태 값을 자동으로 넣어준다.

따라서 상태 업데이트가 안전하게 처리된다.

 

함수형 업데이트로 안전한 처리 예시

const handleClick = () => {
  setCount((prevCount) => prevCount + 1); // 첫 번째 업데이트: prevCount = 0 → 1
  setCount((prevCount) => prevCount + 1); // 두 번째 업데이트: prevCount = 1 → 2
};

 

함수형 업데이트 방식을 사용하면 React는 prevCount에 최신 상태 값을 자동으로 전달한다.

 

작동방식

• React는 상태 업데이트 함수에 현재 상태 값을 제공한다. (count) => count + 1에서 count는 항상 가장 최신 상태 값이다.
• React는 첫 번째 업데이트를 처리한 뒤, 다음 업데이트 함수 호출 시 갱신된 값을 넣어준다.

 

정리

• 문제 상황 : setCount(count + 1)는 count값이 고정되어 비동기 처리 시 원하는 겨로가를 얻지 못할 수 있다.
• 해결 방법 : setCount((count) => count + 1)는 React가 최신 상태 값을 함수의 매개변수로 제공하므로 안전하다.
• 이유 : 함수형 업데이트는 React의 비동기 상태 처리 방식에 맞춰 설계된 기능으로 안정적이고 안전한 상태 업데이트를 보장하기 위한 매커니즘이다.
• 쉽게 말해, 함수형 업데이트는 React에서 안전한 상태 업데이트를 위한 도구이다.