[Hooks] useOptimistic | useOptimistic 훅

카나리아 테스트

useOptimistic 훅은 현재 React의 Canary과 실험실 채널에서만 사용할 수 있어요. 리액트의 릴리즈된 채널에 대해서 알아보려면 여기를 눌러주세요.

 

useOptimistic은 UI를 낙관적으로 업데이트해주는 리액트 훅이에요.

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

---

Reference | 레퍼런스

useOptimistic(state, updateFn)

useOptimistic는 비동기 작업이 진행 중인 동안 다른 상태를 보여주는 리액트 훅이에요. useOptimistic은 인자로 어떤 상태를 받고, 네트워크 요청과 같은 비동기 작업이 지속되는 동안 달라질 수 있는 상태의 복사본을 반환해요. 현재 상태와 작업에 대한 입력을 받는 함수를 받고 작업이 보류중인 동안 사용될 낙관적인 상태를 반환해요.

 

이 상태는 "낙관적" 상태라고 불려요. 설령 작업이 실제로 완료될 떄까지 시간이 소요된다고 하더라도, 즉시 사용자에게 작업의 수행결과를 보여주기 때문이에요.

import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // 낙관적 값과 합쳐서 새로운 상태를 반환해요
    }
  );
}

 

Parameters | 파라미터

• state : 초기에 반환되고 작업이 보류 중인 상태가 아닐 때마다 반환될 값
• updateFn(currentState, optimisticValue) : 현재 상태와 addOptimistic에 전달될 낙관적 값을 받아서 낙관적 상태의 결과를 반환할 함수. 이 함수는 순수함수여야만 해요. updateFn은 두 개의 파라미터인 currentState와 optimisticValue를 받아요. 반환값은 currentState와 optimisticValue가 합쳐진 값이될 거예요.

Returns | 반환값

• optimisticState : 낙관적 상태의 결과. 작업이 보류되지 않는 한 state와 동일하고 작업이 보류된다면 updateFn으로 반환된 값과 동일해요.
• addOptimistic : addOptimistic은 낙관적 업데이트가 있을 때 호출할 디스패치 함수에요. 이 함수는 optimisticValue를 인자로 받고, state와 optimisticValue로 updateFn을 호출할 거예요.

---

Usage | 용법

Optimistically updating forms | 낙관적으로 폼 업데이트 하기

useOptimistic 훅은 네트워크 요청과 같은 백그라운드 연산이 완료되기 전에 낙관적으로 사용자 인터페이스를 업데이트하는 방법을 제공해요. 폼의 컨텍스트 안에서 이 기술은 앱이 더 반응적으로 느껴지도록 만들어요. 사용자가 폼을 제출하면, 변한 값을 반영한 서버의 응답을 기다리는 대신에 인터페이스는 즉각적으로 예상되는 결과를 업데이트 받아요.

 

예를 들어, 사용자가 폼에 메시지를 입력하고 "보내기" 버튼을 누르면, useOptimistic 훅은 메시지가 실제로 서버에 전달되기도 전에 "보내는 중" 이라는 라벨과 함께 목록에 메시지가 즉시 보여지게 만들어줘요. 이러한 "낙관적인" 접근은 속도와 민감도에 깊은 인상을 남겨요. 서버가 메시지를 받았음을 확인하면 "보내는 중"이라는 라벨은 사라져요.

 

예시 보러가기