[4.1장 레프 훅] useRef관련 질문이있습니다.
안녕하세요 선생님 본 강의 예시에서
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가 증가할 줄 알았는데 아니더라구요 왜그런건가요?
Answer 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);
}블로그에는 추가해 놓았는데 참고해주세요.
제가 영상을 만들 때 누락한 부분이었네요. 꼼꼼히 살펴봐 주셔서 실수를 바로 잡을 기회가 생겼습니다. 정말 고맙습니다.
잘못된 useEffect 사용?
1
65
2
useEffect 의존성 질문
1
57
2
orderableProductItem 에 관하여...
0
56
2
강의 자료, 블로그, 깃 주소
0
63
1
React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)
1
104
2
pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.
1
87
2
FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유
1
123
1
dispatch 함수도 리렌더링 유발하지 않나요?
1
203
2
ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유
1
160
2
replaceState를 쓰지 않는 대안
1
195
2
setValue 메서드를 바인딩 해야 하는 이유
1
163
2
MyReact를 IIFE(즉시실행함수)로 설계하신 이유
0
208
2
[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교
0
129
1
useRef 관련하여 질문드립니다
0
152
2
렌더 프롭 관련하여 질문드립니다
0
182
2
[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.
1
395
2
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
1
315
2
[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.
1
355
2
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.
1
281
2
[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다
2
283
1
[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.
1
432
2
[1.3.6 상태정의] state 관련
1
259
1
[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.
1
272
1
[2.1장 컨택스트] 2.1.4 공급자와 소비자 / 에서 질문이 있습니다.
1
424
2