setState 질문 드립니다.

[강병민]

import React, { useState } from "react";
import Header from "./components/Header";

function App() {
  const [value, setValue] = useState(3);
  const onChange = (e, limit = 500) => {
    let timer = setTimeout(() => {
      setValue(e.target.value);
    }, limit);

    timer();
  };
  return (
    <>
      <input onChange={onChange} value={value}></input>
      {value}
    </>
  );
}
export default App;

 

이 코드에서 input값이 변경이 되지 않고 계속 3 입니다. setTimeout 안에서 value를 변화시켜서 그런것 같은데, 

왜 그런건지 리액트 원리에 대해서 설명해 주실수 있나요??

[codingapple]

value라는 state를 인풋입력값으로 집어넣으라고 되어있는데

value라는 state는 항상 3이라 그럴 뿐입니다 

[강병민]

timer 를 사용하지 않을때는 input 안의 값이 수정이 되는데 , timer를 사용하면 수정이 안되는건 왜 인건가요??

[codingapple]

0.5초 후에 setValue(e.target.value) 이걸 해야하는데

e.target.value는 value={value} 이거때문에 항상 3이라 그런듯요 

[글쓴이]

글