[React] Ref

useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요. .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다. React가 DOM 노드에 ref를 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 대신 콜백 ref를 사용하세요.

useRef

useRef의 용도

1. DOM 선택

2. 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것 => useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않음 => 리렌더링 없이 변수값의 변화를 이용할 때 사용할 수 있다

   const nextId = useRef(4);
   const onCreate = () => {
   // 나중에 구현 할 배열에 항목 추가하는 로직
   // ...
   
   nextId.current += 1;
   };

const refContainer = useRef(initialValue);

Callback Ref

• Ref는 포커스, 텍스트 선택 영역, 미디어 재생 등 DOM에 직접적으로 접근하거나, 애니메이션을 직접적으로 실행시킬 때 사용
• ref 어트리뷰트에 React.createRef()를 통해 생성된 ref 를 전달하는 대신 함수를 전달함
• ref 콜백은 컴포넌트의 인스턴스가 마운트될 때 DOM 엘리먼트와 함께 호출
• 컴포넌트 인스턴스의 마운트가 해제될 때 ref 콜백을 null과 함께 호출
• 콜백 ref를 사용하면 child component가 DOM 객체나 ref로 받고있는 뭔가를 늦게 생성해도 (다 마운트 된 후에 클릭 이벤트에 반응한다던가 데이터를 받아온다던가…) 그것을 알아차리고 업데이트할 수 있다!

 <input
  type="text"
  ref={this.setTextInputRef}
 />

 constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // DOM API를 사용하여 text 타입의 input 엘리먼트를 포커스합니다.
      if (this.textInput) this.textInput.focus();
    };
  }

정리

• current 프로퍼티에 변경 가능한 값을 담고 있다

• useRef는 매번 렌더링 시 동일한 ref 객체를 제공함 ⇒ 내용이 변경될 때 그것을 알려주지는 않는다!

  • .current 프로퍼티를 변경한다고 리렌더링 발생 X
  • DOM 노드에 ref를 attach / detach 할 때 실행하고 싶은게 있다면 콜백 ref를 사용해야!!
• 어떤건지 이해하는 거랑 실제로 적재적소에 쓸 줄 아는 건 너무나 다른듯,,, 많이 배워야 한다,,,쿄쿄