[useStateHistory] 되돌리기·다시실행을 한 줄로 붙이는 상태 훅

한 줄 요약 값 하나만 기억하는 대신 거쳐온 값들을 배열로 쌓고, "지금 몇 번째를 보고 있는지"(pointer, 포인터)만 앞뒤로 옮겨 되돌리기다시실행을 구현한 상태 훅입니다.

이럴 때 필요해요

그림판, 텍스트 에디터, 폼 빌더처럼 "방금 한 동작을 취소하고 싶다"는 요구가 있는 화면이 있습니다. 보통 useState 하나로는 직전 값을 기억하지 못해 되돌릴 수가 없죠. 이 훅은 그 기억을 대신 관리해 줍니다.

어떻게 동작하나

1. 값을 바꾸면 새 값을 history 배열 맨 뒤에 추가하고 pointer를 그 자리로 옮깁니다.

2. 되돌리기를 누르면 값을 지우지 않고 pointer만 한 칸 뒤로 옮깁니다. 그래서 다시실행으로 복구할 수 있습니다.

3. 과거로 되돌린 상태에서 새 값을 넣으면 pointer 이후에 남아 있던 "다시실행 이력"은 잘라냅니다. 다른 길을 택한 순간 원래의 미래는 더 이상 유효하지 않기 때문입니다.

핵심은 이거예요

값을 지우는 게 아니라 pointer만 움직인다는 것. undo/redo는 단지 "보고 있는 위치"를 바꾸는 일이라, 값은 history에 그대로 남아 언제든 오갈 수 있습니다.

놓치기 쉬운 것

• 과거에서 새 값을 넣을 때 redo 이력을 안 자르면, 화면 상태와 맞지 않는 유령 미래가 남습니다.

• 이력이 무한정 쌓이면 메모리가 새니 capacity(기본 100)를 두고 오래된 것부터 버립니다. 이때 pointer도 같이 당겨야 화면 값이 어긋나지 않습니다.

• 단축키는 Z/Ctrl+Z 기본 동작과 충돌하므로 preventDefault가 필요합니다.

이런 곳에 써요

• 피그마캔바식 편집기의 Ctrl+Z 되돌리기

• 설문폼 빌더에서 단계 되돌리기