useState와 useRef 질문이요..

Question

이 둘 언제 써야할지 헷갈리네요.. 그러다가, 배열.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 }) },[ st ]) return ( < div > { input2 () } ); } export default App ;

zerocho · Answer

단 하나만 기억하시면 됩니다. useRef는 값이 바뀌어도 화면이 새로 그려지지 않고 useState는 새로 그려집니다.