React 공홈 읽기 - Reference [useRef] / [useImperativeHandle]

읽고 스터디원들과 공유한 내용.

useRef

• 다음 렌더링에서 useRef는 동일한 객체를 반환한다.
• useRef 는 렌더링에 필요하지 않은 값을 참고할 수 있게 해주는 훅
• ref는 그냥 자바스크립트 plain object이다. ref.current가 바껴도 리액트는 변화를 감지하지 못하고 리렌더링을 하지 않는다.
• strict mode에서는 ref 객체가 두번 생성되고, 둘 중 하나는 버려진다. 컴포넌트 함수가 pure하게 만들었다면 문제 없다! (pure 하지 않다면, ref 동작이 원하는대로 안된다는 말인가보네)
• 언제쓰면 좋은가?
  - re-render 일어나는 사이에 값을 저장하고 싶을 때.
  • 리렌더를 일으키지 않고 값을 변경하고 싶은게 있을 때
• useRef(new VideoPlayer())는 객체 생성 비용이 넘 많이 든다. playerRef.current === null이면, playerRef.current = new VideoPlayer(); 로 값을 할당할 수도 있다.

useImperativeHandle

• useInperativeHandle 은 props으로 표현할 수 없는 명령형 동작에만 사용해야한다. (무분별한 사용 x)
  - 예를들면 스크롤 이동, 포커스

  <input {...props} ref={ref} />보며 궁금한 점.
  ref={ref}를 제일 마지막에 둔 이유는 뭘까?

  1번 의견.
  ref를 넘길 수 있는 방법
  element냐
  forwordRef냐

  	element? forwordRef 아니면면 넘길 수 없다며?

  ---> htmlElement면 ref를 넘길 수 있다.
  컴포넌트면 ref를 넘길 수 없음.

  forwordRef라면
  두번째 인자로 무조건 ref라 요렇게 해줘야함.
  <input {...props} ref={ref} />;

  2번 의견
  뒤에 쓴 애가 최종값이자나? 내가 쓴 ref만 쓰게 막아둔거다.