Actions
React 19에서는 비동기 데이터 변형과 상태 업데이트를 더 쉽게 관리할 수 있는 새로운 기능인 Actions를 도입했습니다. Actions는 보류 중인 상태, 오류 처리, 낙관적 업데이트를 자동으로 처리합니다.
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>
);
}
새로운 훅: useActionState
Actions의 일반적인 경우를 쉽게 만들기 위해 새로운 훅 useActionState를 추가했습니다.
const [error, submitAction, isPending] = useActionState(
async (previousState, newName) => {
const error = await updateName(newName);
if (error) {
return error;
}
return null;
},
null,
);
<form> Actions
React 19에서는 <form> 요소에 action 및 formAction props를 사용하여 자동으로 양식을 관리할 수 있습니다.
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>
);
}
새로운 훅: useOptimistic
데이터 변형 중에 낙관적 업데이트를 쉽게 만들기 위해 새로운 훅 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>
);
}
새로운 API: use
렌더링 시 리소스를 읽을 수 있는 새로운 API인 use를 도입했습니다.
const profile = use(fetchProfile());
const theme = use(serverContext ? ServerTheme : ClientTheme);
React DOM
- <form> Actions: <form> 요소에 action 및 formAction props를 추가했습니다.
- Ref를 prop으로 사용: forwardRef 없이 함수 컴포넌트에서 Ref를 사용할 수 있습니다.
- 향상된 수화 오류 보고: 수화 오류를 단일 메시지로 보고합니다.
<form action={actionFunction}>
스타일시트 및 리소스 관리
스타일시트 및 리소스를 더 잘 관리하기 위한 새로운 API를 추가했습니다.
import {useStyleSheet} from 'react-dom';
useStyleSheet("/styles.css", {precedence: 1000});
import {usePreload} from 'react-dom';
usePreload("/styles.css", {as: "style"});
기타 개선 사항
- Context 제공자 단순화: Context 자체를 제공자로 사용할 수 있습니다.
- Ref의 정리 함수: Ref 콜백에서 정리 함수를 반환할 수 있습니다.
- useDeferredValue의 초기 값: 초기 값을 허용하여 초기 렌더링을 더 잘 처리합니다.
- 문서 메타데이터: <title>, <link> 및 <meta> 태그에 대한 네이티브 지원을 추가했습니다.
const inputRef = useCallback(node => {
if (node) {
// 마운트 시점에 작업
}
return () => {
// 언마운트 시점에 정리 작업
};
}, []);
'프론트엔드 공부한 거 정리하는 장소' 카테고리의 다른 글
| React Hooks 상세 요약 및 예시 (복습) (3) | 2024.07.23 |
|---|---|
| API 동일 요청을 처리하는 공부 (0) | 2024.07.19 |
| 새 프로젝트 생성 및 Cloudflare Pages 배포 (0) | 2024.07.18 |
| Next.js 애플리케이션에서 react-query를 사용해야 하는 이유 (4) | 2024.07.15 |
| Electron 프레임워크 기술에 대한 소개 및 구현? (0) | 2023.08.16 |
