인프런 커뮤니티 질문&답변

dohyun_lim님의 프로필 이미지
dohyun_lim

작성한 질문수

[리액트 2부] 고급 주제와 훅

[4.1장 레프 훅] 4.1.1 useRef

[4.1장 레프 훅] useRef관련 질문이있습니다.

해결된 질문

작성

·

248

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가 로깅되는 현상입니다.

  1. 버튼 클릭

  2. 상태 갱신

  3. 컴포넌트 리랜더

  4. 훅 호출

  5. MyReact.useRef: 이전 호출에서 증가된 커서로 memorizedStates 접근.

    1. 값이 없어서 새로 만듬. {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);
  }

블로그에는 추가해 놓았는데 참고해주세요.

 

제가 영상을 만들 때 누락한 부분이었네요. 꼼꼼히 살펴봐 주셔서 실수를 바로 잡을 기회가 생겼습니다. 정말 고맙습니다.

dohyun_lim님의 프로필 이미지
dohyun_lim
질문자

아하 당연한거였군요;;;

김정환님의 프로필 이미지
김정환
지식공유자

실제 리액트의 훅은 커서 관리를 할 필요가 없어요. 그냥 사용하시면 됩니다. 이런 점도 비교하시면서 학습하시면 좋습니다.

dohyun_lim님의 프로필 이미지
dohyun_lim

작성한 질문수

질문하기