useState const를 변경시 입력 값으로 설정하는 방법

Question

다음과 같이 기능적 구성 요소에 변수를 만들었다 고 가정하십시오.

const [quizName, setQuizName] = useState("");

사용자가 입력 한 내용에 따라이 값을 어떻게 변경할 수 있습니까? 내 생각은 다음과 같습니다.

<input
    value={quizName}
    onChange={setQuizName(value)}
></input>

하지만 값이 무엇인지 모릅니다. quizName 변수에 값을 어떻게 가져올 수 있습니까?

Answer 1

<input
    value={quizName}
    onChange={(e)=>setQuizName(e.target.value)}>
</input>

Answer 2

가장 간단한 방법은 입력의 onChange에 다음과 같은 함수를 갖는 것입니다.

<input value={quizName} onChange={(e)=>setQuizName(e.target.value)} />

괜찮아!,하지만 제발 신을 위해이 일을 그만둬!

그 이유는 다음과 같습니다.

입력이 변경 될 때마다 함수를 만들고 실행하고 있습니다! 이것은 성능 바이스에 좋지 않습니다! 특히 구성 요소의 모든 곳에서 대규모 앱에서 수행하는 경우!

당신이해야 할 일은 useCallback아래와 같이 사용하는 것입니다.

const [quizName, setQuizName] = useState("");

const handleInputChange = useCallback((e) => {
   setQuizName(e.target.value)
}, [setQuizName])


return (
   <input value={quizName} onChange={handleInputChange} />
)

다음은 useCallback반응 문서에 대한 설명입니다 .

https://reactjs.org/docs/hooks-reference.html#usecallback

Answer 3

onChange={setQuizName(value)}

이와 같은 함수를 호출하면 변경을 기다리지 않고 실행됩니다.

onChange={(e) => setQuizName(e.target.value)}

그것을하는 올바른 방법입니다