행해 끝나고 뭐라도 공부하자는 생각으로 시작한 스터디
그 대망의 첫번째는, React 19에 대해 찍먹하기.
📌 Actions
React 애플리케이션에서 흔히 사용되는 사례 중 하나는 데이터를 변환(mutation)하고 그에 따라 상태를 업데이트하는 것입니다. 예를 들어, 사용자가 자신의 이름을 변경하기 위해 폼을 제출하면, API 요청을 수행한 뒤 응답을 처리해야 합니다. 과거에는 대기 상태(pending state), 에러 처리, 낙관적 업데이트(optimistic update), 순차적인 요청 처리를 수동으로 관리해야 했습니다.
공식문서를 번역하면 위에 같이 나온다. 라이브러리 없이 사용할때는 직접적으로 핸들링을 해주어야하는 부분들을 리액트 자체에 내재화 하는 것 같았다.
관련하여 몇가지 hook도 추가 되었다.
1. useTranstion
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect("/path");
})
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}비동기 함수의 요청 실행되는 순간 isPending의 값은 true가 되며, 끝나는 순간 false로 바로 변경해 준다.
기존이었다면, 함수 실행 순간 useState를 사용해 loading을 하는 방식을 사용했겠지만 이제는 isPending로 처리할 수 있게 된것이다.
현재 자주 사용중인 tanstack-query의 isLading이나 isPending과 비슷한 역할을 하는 겉 같다.
2. useActionState
// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {
const [error, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const error = await updateName(formData.get("name"));
if (error) {
return error;
}
redirect("/path");
return null;
},
null,
);
return (
<form action={submitAction}>
<input type="text" name="name" />
<button type="submit" disabled={isPending}>Update</button>
{error && <p>{error}</p>}
</form>
);
}useTranstion와 마찬가지 인 것 같다. 차이점이 있다면 form에서 사용되고 있고, form안에 있는 input들의 데이터를 formData로 받아와 컨트롤 가능 하다는 점이다. 그리고 기존 form처럼 새로고침을 하지 않는다.
3. useFormStatus
import {useFormStatus} from 'react-dom';
function DesignButton() {
const {pending} = useFormStatus();
return <button type="submit" disabled={pending} />
}공식문서에는 예시가 단편적으로만 나와 있는데, form태그 안의 자식요소들에게 현재 상태를 전역상태처럼 관리할 수 있게 해주는 것 같았다.
얘도 useActionState를 좀더 하게 될때 더 파보는 것으로 하겠다.
4. useOptimistic
function ChangeName({currentName, onUpdateName}) {
const [optimisticName, setOptimisticName] = useOptimistic(currentName);
const submitAction = async formData => {
const newName = formData.get("name");
setOptimisticName(newName);
const updatedName = await updateName(newName);
onUpdateName(updatedName);
};
return (
<form action={submitAction}>
<p>Your name is: {optimisticName}</p>
<p>
<label>Change Name:</label>
<input
type="text"
name="name"
disabled={currentName !== optimisticName}
/>
</p>
</form>
);
}말 그대로 낙관적 업데이트를 해준다. 또한, 업데이트가 정상적으로 되지 않으면 이전 값으로 다시 돌아가게 된다.
마무리
전부다 정리 한 것은 아니지만, 지금까지 어느정도만 이해한 친구들을 정리하자면 이렇게 끝이 나는 것 같다.
아무래도 공식문서만 보고 글을 적는것 보다 직접 써보고 여기에 더 추가하는 방식으로 하는게 나에게 더 좋은 방법 인 것 같다.
내가 느낀 이번 React 19 간단 후기는, 비동기 통신에 대해 많은 것들을 추가 했는데 기존에 사용되고 있는 라이브러리가 있는데
"굳이 쓸 필요가 있을까?"가 생각이 많이 들었다.
차주에는 실습 예제 하기로 했으니 한 것을 바탕으로 더 추가해 보도록 하겠다!
