✨useRef로 변수 관리하는 법

App.js

우선 이부분은 주석 처리해주고⬇

Ref + 버튼 눌렀을 땐 Ref가 증가하게 하고
State + 버튼 눌렀을 땐 State가 증가하게 할 것❗

State는 클릭할 때마다 1씩 증가하는 반
Ref는 아무리 클릭해도 꿈쩍 안 함🤷‍♀️❓❓

실제론 변하고 있는데 화면에선 무반응⭕

👉 Ref는 Ref의 current의 값이 변하더라도 다시 컴포넌트 렌더링❌

렌더링 안 되면 새로운 값을 화면에서 보여주지 않아서 생기는 현상❗

👀Ref 변한 걸 억지로 보여주고 싶다면❓

강제로 컴포넌트 렌더링 하면 됨

State + 버튼 누르면 State는 1증가 되고 Ref는 31이 증가됨✅

State는 바뀌면 렌더링 되니까🙆‍♀️

👊State & Ref & 변수

Variable + 버튼 누르면 화면에선 안 바뀌고
콘솔에선 값 올라가는 건 Ref랑 똑같은데

State + 버튼 눌렀을 때 7 값을 화면에 보여줘야 하는데
🤷‍♀️왜 안보여주는 걸까❓

👉 이 값은 리렌더링 되면 값이 '초기화' 되기 때문❗

📑렌더링한 숫자 기록하기

몇 번을 렌더링 했는지, input 만들기

input을 위한 value State 만들기

컴포넌트 렌더링 몇번이나 되는지 이 값을 넣어줄 Ref 만들기

🤔App 컴포넌트가 렌더링 될 때마다
renderCountRef.current 값을 올릴려면
어떤 로직을 써야할까❓❓

몇번이 되는지는 renderCountRef.current 넣어주면 됨✅

타이핑 칠 때도 value state가 변경이 되니까이렇게 렌더링 됨🌫

Ref & 변수는 변경 안 됨🙅‍♀️

State 버튼 눌러줘야 변경 됨🙆‍♀️

✅Ref 이용해서 저렇게 사용할 수 있음