React 19 beta 커피 주문서

React 19 beta 가 나왔을 때 useActionState 를 써 본 예제다. 커피 종류·온도·샷을 고르고 주문하면 Action 이 비동기로 처리되는 동안 isPending 으로 "제조중" 을 보여 주고, 끝나면 커피 그림이 나온다. 주문서에 낙서하기 는 폼 위 임의 위치에 그림을 붙이고, 주문서 초기화 는 폼과 결과를 비운다.

Action 과 useTransition 의 동작 원리는 노트 REACT 19 beta 에 따로 정리했다.

플레이그라운드에서 바뀐 것

• 커피 사진은 외부 API(coffee.alexflipnote.dev)를 dev 서버 프록시로 불렀다. 배포본에는 프록시가 없고 그 API 는 CORS 를 열지 않아서, public/coffee/ 의 그림 중 하나를 고르도록 바꿨다.
• react-scripts 5 가 끌어오는 ajv-keywords 가 ajv 8 을 요구하는데 6 이 잡혀 빌드가 깨졌다. ajv 8 을 devDependency 로 넣었다.