[React] 리액트 상태 업데이트 할 때 update function 사용하기

유어슈 pr 리뷰 중에 좋은 걸 배워서 기록해봄 쭌 감사링 나중에 보여줘야징 ㅎㅎ

 

이전 상태에 기반하여 상태를 업데이트 해야할 때 update function 사용이 더 낫다는 의견이 있었다!

 

그의 리뷰,,

지금은 코드가 문제없이 동작하지만 추후에 비동기 로직등이 handleCheckAgree() 함수에 추가되면 상태 업데이트가 예상치 못하게 이루어질 수 있을 것 같아요!

handleCheckAgree()와 같이 이전 상태에 기반하여 상태를 업데이트 해야할 때는 update function을 쓰는게 좋은 습관인 것 같습니다.

 

 

 

기존 코드

const [agreed, setAgreed] = useState(false);

...

const handleCheckAgree = () => {
    setAgreed(!agreed);
  };

 

기존 코드는 이런 상태였다! 하지만 이 코드의 문제점이 있는데,,,

 

현재 코드 분석
useState 훅을 사용할 때 상태 업데이트 함수(예: setAgreed)는 비동기적으로 동작한다. 이 말은 setAgreed 함수를 호출했을 때 상태 값이 즉시 변경되지 않고 컴포넌트의 다음 렌더링 때 반영된다는 뜻! 때문에 여러 상태 업데이트가 동시에 발생할 경우 예상치 못한 결과가 나올 수 있다.

문제 상황
예를 들어 handleCheckAgree 함수에서 현재 방식으로 상태를 업데이트한다고 할 때 agreed의 현재 값에 따라 다음 상태를 결정한다. 만약 agreed의 값이 업데이트 중이거나 최근 상태를 반영하지 않은 채로 사용된다면 !agreed는 잘못된 결과가 나타날 수 있다는 문제!

 

'React는 상태 업데이트를 처리하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다'

(https://react.dev/learn/queueing-a-series-of-state-updates)

Queueing a Series of State Updates – React

 

해결 방안
이런 문제를 해결하기 위해 리액트에 상태 업데이트 시 함수를 인자로 받는 패턴이 있음! 이 방식을 사용하면 항상 최신의 상태 값을 기반으로 다음 상태를 계산할 수 있게 된다

 

수정한 코드

  const handleCheckAgree = () => {
    setAgreed(prevAgreed => !prevAgreed);
  };

 

여기서 prevAgreed는 상태 업데이트 함수가 실행될 때의 최신 agreed 값을 나타낸다. 이런 방법은 여러 비동기 작업이 상태에 영향을 줄 수 있는 복잡한 로직에서 매우 유용함~~ 안전하고 일관된 상태 관리 가능!

 

setEnabled(enabled => !enabled)
setEnabled(prevEnabled => !prevEnabled).

 

이런 네이밍 방법들도 있당

 

 

 

RECAP

상태 업데이트와 렌더링
리액트에서 setState로 상태를 설정하는 행위는 현재 렌더링된 컴포넌트에서 바로 해당 변수를 변경하지 않는다. 대신 리액트는 새로운 렌더링을 요청하고 이렇게 변경된 상태를 반영한 새로운 UI를 사용자에게 보여준다.

배칭(Batching)
리액트는 이벤트 핸들러가 실행 완료된 후에 상태 업데이트를 처리한다. 이 과정을 '배칭'이라고 부르고 여러 상태 업데이트를 모아 한 번에 처리함으로써 효율성을 높입니다. => 여러 번의 상태 업데이트가 하나의 이벤트로 발생하더라도 실제 DOM에는 한 번만! 변화가 적용됨

한 이벤트에서 여러 번의 상태 업데이트
특정 이벤트에서 상태를 여러 번 업데이트해야 할 경우 상태 업데이트 함수를 사용할 수 있다. 이 함수는 현재 상태 값을 입력으로 받아 새로운 상태 값을 반환하는 업데이터 함수를 인자로 받는다. 예를 들어 setNumber(n => n + 1)은 현재 숫자 n에 1을 더해 새로운 상태로 설정한다. 

유어슈 하면서 중구난방이었던 코드 스타일을 좀 맞춰가는 느낌이라 재밌당...

암튼 이걸로 많이 써야겠당 굿굿