인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

done's profile image
done

asked

Learning React while making web games

3-12. React.createRef

useState와 useRef 질문이요..

Written on

·

190

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;
react

Answer 1

0

zerocho님의 프로필 이미지
zerocho
Instructor

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

done's profile image
done

asked

Ask a question