• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

useState와 useRef 질문이요..

19.12.12 15:12 작성 조회수 138

0

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

그러다가,

배열.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;

답변 1

답변을 작성해보세요.

0

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