REACT13 useActionState(useFormState) & useOptimistic 사용자가 폼을 제출했을 때,서버의 응답을 화면에 나타내는 useActionState,서버 응답을 기다리지 않고 화면부터 바꾸는 useOptimistic. 1. useActionState (구 useFormState)서버 액션을 통해 폼 데이터를 서버로 보냈을 때, 서버에서 결과 메시지(상태)를 다시 클라이언트로 돌려받아 화면에 렌더링할 때. 서버 액션 함수가 반환하는 값을 이 훅이 가로채서 state로 만듦. // 1. 서버 액션 (app/actions.ts)'user server';// 이전 상태와 폼 데이터를 받음.export async function submitRetrospective(prevState: any, formData: FormData) { const content = formData.. 2026. 2. 26. useFormStatus Form이 현재 제출 중(pending)인지 아닌지 쉽게 파악하여 버튼을 비활성화하거나 로딩 스피너 보여줌. 1. 버튼을 Client Component로 분리하기useFormStatus는 태그의 자식 컴포넌트 안에서만 작동함.제출 버튼만 따로 떼어내어 클라이언트 컴포넌트로 만들어 주어야 함.'use client' // 상태(pending)를 감지해야 하므로 클라이언트 컴포넌트import { useFormStatus } from 'react-dom';export function SubmitButton() { // form의 현재 상태를 가져옴. 제출 중이면 true const { pending } = useFormStatus(); return ( {pending ? '저장 중' .. 2026. 2. 26. useLayoutEffect useEffect는 화면 업데이트 후 effect 실행. 비동기적 실행(해당 작업 실행 동안 다른 작업 블로킹 안함)useLayoutEffect는 effect 실행 후 화면 업데이트. UI 변화 더 정교. 동기적 실행(해당 작업 실행 동안 다른 작업 블로킹)스크롤이나 레이아웃에 사용React Hooks에 취한다 - useLayoutEffect 누가 안알려주면 절대 모르는 훅useEffect보다 useLayoutEffect가 먼저 실행됨.import {useEffect, useLayoutEffect, useState} from "react";function App() { const [count, setCount] = useState(0); useEffect(() => { consol.. 2025. 1. 21. useId input 요소 등에 id를 제공할 때 사용 React Hooks에 취한다 - useId 세상에서 제일 쉬운 리액트 훅 import {useId} from "react";function App() { return ( );}function MyInput() { const id = useId(); return ( {/* label 클릭해도 input에 focus input마다 개별 id 부여 가능*/} name age )}export default App; 2025. 1. 20. 이전 1 2 3 4 다음