React에서 토글 상태 관리하기

프로젝트하면서 블로그 써야지,,,써야지.... 하고 주제만 적어놓고 이제야 씀ㅋㅋ 몰아작성하기...

 

React에서 상태를 관리할 때 토글 기능을 많이 쓴다.

드롭다운 메뉴를 열거나 닫는 기능을 만들 때, 상태를 true 또는 false로 토글하는 기능!!

 

난 게시판에서 정렬방법 선택할 때 토글기능을 썼음. 근데 난 처음에 단순하게

setFilterDropdown(!filterDropdown)

이렇게 작성했단말임...

 

근데 찾아보니까 보통

setFilterDropdown(prevState => !prevState)

이렇게 쓰더라고..??

 

그래서 이 두개가 뭐가 다르냐면

 

1. setFilterDropdown(!filterDropdown)

 

• 장점: 코드가 간단하고 이해하기도 쉬워. 딱히 복잡하게 생각 안 하고도 바로 쓸 수 있음

• 단점: 근데 React는 상태를 비동기적으로 업데이트해서 상태가 여러 번 연속으로 바뀔 때 꼬일 가능성이 있음.... 특히 버튼을 빠르게 여러 번 누르면 원하는 대로 동작 안 할 가능성이 높아짐..!!

 

2. setFilterDropdown(prevState => !prevState) ✅

 

• 장점: React의 비동기 특성 때문에 생기는 문제를 피할 수 있음! 언제 상태가 바뀌든 항상 최신 상태값을 기반으로 안전하게 처리가능

• 단점: 코드가 살짝 더 길어진다..?

 

 

비동기 상태 업데이트의 문제

 

React에서는 상태가 바로바로 업데이트되는 것처럼 보이지만, 실제로는 일정 시간 뒤에 처리되기도 함. 그래서 버튼을 여러 번 클릭할 때마다 상태값이 최신 상태를 제대로 반영하지 않으면, 드롭다운이 이상하게 열리고 닫힐 수 있음. 이런 경우에는 예상치 못한 버그가 발생할 수 있음,,,,

 

함수형 업데이트의 장점

 

함수형 업데이트 방식은 이전 상태를 기준으로 새로운 상태를 계산하기 때문에, 상태가 연속적으로 변경돼도 잘 작동됨. 특히 여러 비동기 작업이 동시에 일어나는 복잡한 상황에서도 매우 유용하다고....

 

암튼 앞으로는 prevState => !prevState 이렇게 작성하긔ㅋㅋ