<div id="readability-page-1" class="page"><div><h2 id="1-optimistic-ui">1. Optimistic UI</h2>
react 19에 <code>useOptimistic</code> 훅이 추가되었다. <code>use</code>도 그렇고 react가 점점 생태계를 넓히려는 것 같다. 아무튼 새로운 기능이 추가되었으니까 무엇인지 살펴보자
<h4 id="예제">예제</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/5e211ef6-8da1-4506-a5b4-c497aa4c988d/image.png">
아주 귀엽고 간단한 form이 있다. 배 이름, 최고 속력, 이미지를 넣어 등록하면 상단에 있는 Detail에서 작성된 배를 보여주는 간단한 form이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/8db3b2a1-3519-4fc8-802e-2bff52b2eb6a/image.gif">
"새 배" 라는 말그대로 새로운 배를 추가했을 때, 등록 버튼을 누르고 서버에서 응답을 받기 전까지 잠시동안 ChatGPT 이미지스러운 로딩화면이 나온다. 
여기서, 사용자의 네트워크 환경이 흐리다면 재미없는 로딩화면을 오랫동안 봐야한다는 것인데 이미지 정도야 서버 응답 전에 미리 보여줘도 되지 않을까?
그래서 준비한 것이 <code>useOptimistic</code>다
<h4 id="useoptimistic">useOptimistic</h4>
가장 먼저 <code>useOptimistic</code>를 선언한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/ff2eaf32-1206-415d-9f1b-02d5ddf57735/image.png">
이제 <code>optimisticShip</code>을 Detail에 props로 넘겨준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/f6103de0-d674-4889-8e0b-a8ba7a223620/image.png">
<code>optimisticShip</code>이 없으면 <code>use</code>를 통해 fetch한 서버데이터를 보여준다. 
이제 <code>setOptimisticShip</code>을 Form에 넘겨준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/aa5a437e-4c2c-4a1c-8b90-e0d2501f48b5/image.png">
그리고 <code>createOptimisticShip</code>라는 함수가 필요한대 Detail에 필요한 데이터를 Form 데이터 기반으로 만들어 Optimistic하게 화면에 띄운다.
<img src="https://velog.velcdn.com/images/dongha1992/post/550dc0e9-2700-44af-bb73-bbb1fa85daf7/image.png">
<code>CreateForm</code>의 action에서 호출하면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/665ea095-ce92-4847-a360-2a31e3f0e712/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/2c963391-f682-4d6a-8941-7c6cc1e1c5ed/image.gif">
서버에서 데이터가 받아오기 전에 등록한 사진으로 먼저 보여주고 있음을 확인할 수 있다. 
<h4 id="비동기-상황에서-변하는-메시지">비동기 상황에서 변하는 메시지(?)</h4>
[버튼]의 message 역시 낙관적 업데이트로 변경시킬 수 있다. 
가령, 버튼의 message를 단계별로 나눈다고 하면
1.[버튼]의 message는 초기값이 "등록"
2.[버튼] 클릭 후 서버에서 응답오기 전까지 "등록중"
3.서버에서 응답 받으면 "등록 완료! 로딩중..."
4.그리고 다시 "등록"
이렇게 [버튼]의 메시지가 비동기적 상황에 따라 변화면서 유저에게 더욱 상세한 정보를 전달할 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/d4485b32-115f-445d-b289-50d8bc7d1140/image.png">
<code>CreateForm</code>에 <code>useOptimistic</code> 으로 <code>message</code>를 하나 만든다.
<img src="https://velog.velcdn.com/images/dongha1992/post/0a6954fa-8262-49c0-b984-cef5d6c1d35e/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/033aa672-d524-486e-a37e-b7e6986ebb45/image.png">
아주 간단하다. 이제 다시 배를 등록해보면
<img src="https://velog.velcdn.com/images/dongha1992/post/825e759b-2340-4201-926d-72d5d2e0b66b/image.gif">
[버튼]의 메시지가 잘 변화하는 것을 확인할 수 있다. 
이런 것들이 가능한 이유는 <code>useOptimistic</code>는 transition동안 state를 업데이트하는데, transition 끝나면 초기값으로 지정해뒀던 값으로 다시 돌아오는 것이다. 
참고 : <a href="https://www.epicreact.dev/">epic-react</a></div></div>

삶도 재입학이 되나요?

1. Optimistic UI
react 19에 useOptimistic 훅이 추가되었다. use도 그렇고 react가 점점 생태계를 넓히려는 것 같다. 아무튼 새로운 기능이 추가되었으니까 무엇인지 살펴보자
예제
아주 귀엽고 간단한 form이 있다. 배 이름, 최고 속력, 이미지를 넣어 등록하면 상단에 있는 Detail에서 작성된 배를 보여주는 간단한 form이다. 
"새 배" 라는 말그대로 새로운 배를 추가했을 때, 등록 버튼을 누르고 서버에서 응답을 받기 전까지 잠시동안 ChatGPT 이미지스러운 로딩화면이 나온다. 
여기서, 사용자의 네트워크 환경이 흐리다면 재미없는 로딩화면을 오랫동안 봐야한다는 것인데 이미지 정도야 서버 응답 전에 미리 보여줘도 되지 않을까?
그래서 준비한 것이 useOptimistic다
useOptimistic
가장 먼저 useOptimistic를 선언한다.
이제 optimisticShip을 Detail에 props로 넘겨준다.
optimisticShip이 없으면 use를 통해 fetch한 서버데이터를 보여준다. 
이제 setOptimisticShip을 Form에 넘겨준다. 
그리고 createOptimisticShip라는 함수가 필요한대 Detail에 필요한 데이터를 Form 데이터 기반으로 만들어 Optimistic하게 화면에 띄운다.
CreateForm의 action에서 호출하면 된다.
서버에서 데이터가 받아오기 전에 등록한 사진으로 먼저 보여주고 있음을 확인할 수 있다. 
비동기 상황에서 변하는 메시지(?)
[버튼]의 message 역시 낙관적 업데이트로 변경시킬 수 있다. 
가령, 버튼의 message를 단계별로 나눈다고 하면
1.[버튼]의 message는 초기값이 "등록"
2.[버튼] 클릭 후 서버에서 응답오기 전까지 "등록중"
3.서버에서 응답 받으면 "등록 완료! 로딩중..."
4.그리고 다시 "등록"
이렇게 [버튼]의 메시지가 비동기적 상황에 따라 변화면서 유저에게 더욱 상세한 정보를 전달할 수 있다.
CreateForm에 useOptimistic 으로 message를 하나 만든다.
아주 간단하다. 이제 다시 배를 등록해보면
[버튼]의 메시지가 잘 변화하는 것을 확인할 수 있다. 
이런 것들이 가능한 이유는 useOptimistic는** transition동안 state를 업데이트하는데**, transition 끝나면 초기값으로 지정해뒀던 값으로 다시 돌아오는 것이다. 
참고 : epic-react

Epic React - Optimistic UI

댓글