https://ko.react.dev/reference/react/useActionState
https://ko.react.dev/reference/react/useOptimistic
useActionState
- useActionState는 React DOM에 소속되어 있음.
- 폼 액션의 결과를 기반으로 state를 업데이트할 수 있도록 제공하는 Hook
const [state, formAction] = useActionState(fn, initialState, permalink?);
- 컴포넌트 최상위 레벨에서 useActionState를 호출하여 폼 액션이 실행될 때 업데이트되는 컴포넌트 state를 생성
- useActionState에 기존의 폼 작업함수와 초기 state를 전달하면 최신 폼 state와 함께 폼에서 사용하는 새로운 액션을 반환함.
- React 서버 컴포넌트를 지원하는 프레임워크와 함께 사용할 때, useActionState는 클라이언트에서 자바스크립트가 실행되기 이전에도 폼을 상호작용하도록 만들 수 있음. 서버 컴포넌트를 사용하지 않는다면 컴포넌트 지역 state와 동일.
useOptimistic
- UI를 낙관적으로 업데이트할 수 있게 해주는 React Hook
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
- 참고) '낙관적' 상태? 실제로 작업을 완료하는 데 시간이 걸리더라도 사용자에게 즉시 작업의 결과를 표시하기 위해 일반적으로 사용됨
- apollo client에서 cache도 낙관적 상태로 볼 수 있는걸까? 혹은 loading state?
- 비동기 작업이 진행 중일 때 다른 상태를 보여줄 수 있게 해줌. 인자로 주어진 일부 상태를 받아, 네트워크 요청과 같은 비동기 작업 기간 동안 달라질 수 있는 그 상태의 복사본을 반환함. 현재 상태와 작업의 입력을 취하는 함수를 제공하고, 작업이 대기 중일 때 사용할 낙관적인 상태를 반환함.
