대충 React 19 훑어보기

젠장… React 19가 stable하다고 합니다.

React 18이 2022년 3월에 나왔으니까… 3년 좀 안돼서 Major 버전이 올라갔네요.

Major 버전이 올라갔다는 소리는 뭐다? 새로운게 많다~ React 개발자들 죽어나가는 소리가 여기까지 들리네요…

그냥 [링크] 요 링크에서 새로운 것들만 그냥 훑어보는 시간을 가질 겁니다. 깊게 파면 하루종일 써야할 것 같으니, 그건 다음 기회에…

Actions

비동기적으로 state를 변화시키는 함수를 통칭 Action이라고 부를 거랍니다. 컨벤션이라네요.

그리고 이에 관한 Hooks가 몇 개 생겼습니다. 하나씩 보시죠

useTransition

비동기 함수를 호출한 후, 작업이 완료될 때까지의 pending 상태를 나타태는 hook입니다.

기존에는 pending 상태를 나타내기 위해 boolean 타입의 hook을 사용하였는데요,

const ExampleA = () => {
  const [isPending, setIsPending] = useState(false);
  
  const handleClick = async () => {
    setIsPending(true);
    // 대충 비동기 작업
    setIsPending(false);
  }
  
  return (
    <button onClick={handleClick} disabled={isPending}>button</button>
  )
}

React 19부터는 아래와 같이 사용할 수 있다는 것이죠.

const ExampleB = () => {
  const [isPending, startTransition] = useTransition();
  
  const handleClick = async () => {
	  startTransition(/* 대충 비동기 작업 */);
  }
  
  return (
    <button onClick={handleClick} disabled={isPending}>button</button>
  )
}

변화가 있긴 하지만 크게 와닿지는 않는 느낌? 애매하네요…

useActionState

약간 form 관련 라이브러리의 기능을 가져온 느낌인데요, 예시를 보면 감이 좀 잡힐 겁니다.

const Exmaple = () => {
  const [state, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const nextState = await fn(formData);
      return nextState;
    },
    initialState,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>submit</button>
      {state && <p>{state}</p>}
    </form>
  );
}

보기만 해서는 잘 모르겠긴 한데, 막상 쓸 때 되면 되게 잘 쓸 것 같은 훅같아요.

useFormStatus
```
import { useFormStatus } from 'react-dom';

const SubmitButton = () => {
	const { pending } = useFormStatus();	
	return <button type="submit" disabled={pending}>Submit</button>
}
```
Context를 사용하지 않았지만 사용한 것처럼, 부모 컴포넌트 중에서 가장 가까운 form을 찾아서 상태를 반환해준다네요. pending 말고도 data, method, action 을 반환하니 이건 좀 유용하게 쓰일 수도?

특히 form 관련 라이브러리에서는 진짜 잘 쓸 듯?
useOptimistic

**Optimistic Update(낙관적 업데이트)**관련 훅입니다.

낙관적 업데이트란?

보통 비동기 요청을 보내면, 요청이 끝나고 받은 결과를 통해서 상태를 업데이트를 합니다. 하지만 요청이 오래 걸릴수록 사용자 경험(UX)가 안좋아지니 일단 성공했을 때의 결과를 미리 보여주고, 요청 결과를 후처리하는 방식입니다.

사용 방법은 대충 이러하네요.
```
const OptimisticExample = ({ currentValue, updateValue }) {
  const [optimisticValue, setOptimisticValue] = useOptimistic(currentValue);

  const submitAction = async formData => {
    const newValue = formData.get("value");
    setOptimisticName(newValue);
    
    const updatedValue = await updateValue(newValue);
    updateValue(updatedValue);
  };

  return (
    <form action={submitAction}>
      <p>value is: {optimisticValue}</p>
      <p>
        <label>Change Name:</label>
        <input type="text" name="value" />
      </p>
    </form>
  );
}
```
updateValue 요청이 진행되는 동안 optimisticValue를 보여주다가, 요청이 완료되거나 에러가 발생하면 React에서 바로 currentValue로 바꿔준다네요.

사실 글만 봐서는 저게 도대체 어떻게 작동하는 거지? 싶은데, 써봐야 알 것 같네요… 일단 좋아보이긴 함!

New API: `use`

use라는 API가 새로 생겼습니다. 읽어보는데, 생각보다 다양하게 사용되어서 용도를 뭐라 콕 집기가 애매하네요… 하나씩 보시죠.

New API: use

New API: `use`