useState와 useRef 질문이요..

이 둘 언제 써야할지 헷갈리네요..

그러다가,

배열.map을 통해서 버튼을 만들고,

버튼을 onClick을 통해서 배열안에 들어있는 값을 인자로 보내줘서 버튼을 누를때마다 그 인자값을 콘솔로그로 나오게 했습니다.

그런데,

state를 통해서 하면 값이 비정상적으로 나옵니다.

마치 이전의 값이 나옵니다..

반면에 useRef는 값이 잘나오네요...

정확히 어떻게 작동하는지 모르겠네요...

실험 코드:

import React,{useCallback,useState,useRef} from 'react';
import './App.css';



const App = () =>{
const [st, setSt] = useState(null);
const chageRef = useRef(0);
const abc = useCallback(v=>()=>{
setSt(v)
 chageRef.current = v
console.log("v",v,"State값",st," ref값", chageRef.current)
},[st])
const input2 = useCallback(()=>{
return [1,2,3,4].map(v => {
return <button ref={input2} onClick={abc(v)}>abc</button>
})
},[st])

return (
<div>
{input2()}
</div>
);
}

export default App;

Inflearn Community Q&A