onsubmit 핸들러 내에서 렌더링이 발생하는 경우

Question

저는 반응이 처음이고 배우는 동안 제어되는 구성 요소와 제어되지 않는 구성 요소를 이해하기 위해 몇 가지 코드를 시도하고 usestate와 useref를 사용했습니다. 처음으로 데이터 이름을 john 및 age:40으로 지정하고 제출을 클릭했을 때 제출하는 동안 상태를 변경했기 때문에 이름이 "prakash"이고 나이가 40으로 표시되었습니다. 그런 다음 나이만 60으로 변경하고 제출을 클릭했지만 변경되지 않았습니다. 제출하는 동안 상태를 변경했기 때문에 나이가 궁금합니다. 즉, 나이를 렌더링하고 60으로 변경해야 함을 의미합니다. 왜 나이가 바뀌지 않는지 설명할 수 있나요?

import { Fragment, useReducer, useRef, useState } from "react"



export default function Sample()
{
    
    const [name,setname]=useState();
    const age=useRef();
    const handelsubmit=(e)=>{
        e.preventDefault();
        setname("prakash")
        console.log(`${name},${age.current.value}`)
    }
    return(
    <form onSubmit={handelsubmit}>
        <label>name:{name}</label>
        <input type="text" onChange={(e)=>setname(e.target.value)} />
        <label>age:{age.current?.value==undefined?null:age.current.value}</label>
        <input type="text" ref={age}/>
        <button>submit</button>
    </form>
    )
}

Answer 1

나이 입력 값을 변경해도 표시된 나이 값이 업데이트되지 않는 이유는 useRef 후크를 사용하여 나이 입력 필드의 값에 액세스하기 때문입니다. 이 는 값이 변경될 때 다시 렌더링을 트리거하지 않습니다.

양식을 제출할 때 코드에서 이름 상태는 업데이트되지만 연령 상태는 업데이트되지 않습니다. age.current.value를 사용하여 연령 값에 액세스하면 구성 요소의 상태를 사용하지 않고 연령 입력 필드의 현재 값에 직접 액세스하게 됩니다. age.current.value 값은 구성 요소 상태의 일부가 아니므로 이를 변경해도 다시 렌더링이 트리거되지 않습니다.

name 상태를 설정한 후 handelsubmit 기능에서 연령 상태를 업데이트할 수 있습니다.

으아악