onClick={() => setState((prev) => !prev)} 와 onClick={() => setState(!state)}의 차이

haxwon·2024년 3월 8일
0

React

목록 보기
2/2

두 개의 코드는 동일한 동작을 수행하지만 내부적으로 약간 다른 방식으로 작동합니다.

onClick={() => setToggleAlarm((prev) => !prev)}:

함수형 업데이트를 사용하여 이전 상태를 기반으로 새로운 상태를 설정합니다.
이전 상태를 가져와서 그것의 반대 값을 새로운 상태로 설정합니다.
이전 상태에 대한 참조를 직접적으로 사용하여 상태 업데이트를 수행하므로 이전 상태가 항상 최신 상태임을 보장할 수 있습니다.
상태 업데이트가 비동기적으로 발생할 때 사용하면 안정성을 높일 수 있습니다.

onClick={() => setToggleAlarm(!toggleAlarm)}:

현재 상태를 기반으로 새로운 상태를 설정합니다.
현재 toggleAlarm 값을 역으로 설정하여 새로운 상태로 설정합니다.
이전 상태에 대한 참조를 사용하지 않고 현재 상태만 고려합니다.
비동기적으로 상태 업데이트가 발생하지 않는 한 사용에 문제가 없지만, 상태 업데이트가 비동기적으로 발생할 때 예상치 못한 동작이 발생할 수 있습니다.

profile
그냥 하는 프론트엔드 개발자

0개의 댓글