이 둘 언제 써야할지 헷갈리네요..
그러다가,
배열.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;