인프런 커뮤니티 질문&답변
작성한 질문수
[4.1장 레프 훅] useRef관련 질문이있습니다.
해결된 질문
작성
·
245
1
안녕하세요 선생님 본 강의 예시에서
import MyReact from "./lib/MyReact";
import React from "react";
export default () => {
const ref1 = MyReact.useRef(1);
const ref2 = MyReact.useRef();
const [state, setState] = React.useState(0);
console.log(state)
if (state > 2) {
console.log("hihi");
ref1.current = ref1.current + 1;
}
return (
<>
<button onClick={() => setState(state + 1)}>
state increase (state: {state})
</button>
<div>{ref1.current}</div>
<input ref={ref2}></input>
<button onClick={() => console.log("input value", ref2.current.value)}>
ref2 select
</button>
</>
);
};state >2 이면 값이 증가하는것을 확인했는데 이후에도 계속 state가 2 초과 이니까 계속 ref1.current가 증가할 줄 알았는데 아니더라구요 왜그런건가요?
답변 1
1
김정환
지식공유자
MyReact.useRef의 구현을 보시면 힌트가 되실 겁니다. 호출 될 때마다 커서를 증가 시키는데요. 매번 새로운 레프 객체를 만들기 때문에 { current: 1 } 값에 1을 더해 2가 로깅되는 현상입니다.
버튼 클릭
상태 갱신
컴포넌트 리랜더
훅 호출
MyReact.useRef: 이전 호출에서 증가된 커서로 memorizedStates 접근.
값이 없어서 새로 만듬. {current: 1} // 문제의 원인
이 현상을 해결하려면 컴포넌트 측에서 MyReact 커서를 초기화해야합니다.
export default () => {
// 커서를 초기화 합니다.
MyReact.resetCursor();
const ref1 = MyReact.useRef(1);
const [state, setState] = React.useState(0);
if (state > 2) {
ref1.current = ref1.current + 1;
console.log("ref1", ref1);
}블로그에는 추가해 놓았는데 참고해주세요.
제가 영상을 만들 때 누락한 부분이었네요. 꼼꼼히 살펴봐 주셔서 실수를 바로 잡을 기회가 생겼습니다. 정말 고맙습니다.
아하 당연한거였군요;;;