[react] Ref

class에서 사용 방법

1. 함수를 사용한 방법 (함수를 사용하기 때문에 ref설정시 자유도가 높다)

input; // 선언

inputRef = (c) => {
	this.input = c;
}

this.inputRef.focus()

<Tag ref={this.inputRef}>

2. createRef 사용법 (hooks와 사용법이 비슷해서 통일성이 있다.)

inport React, { createRef } from 'react'

inputRef = createRef()

this.inputRef.current.focus()

<Tag ref={this.inputRef}>

hooks에서 사용 방법

import React, { useRef } from "react";

const inputRef = useRef();

inputRef.current.focus();

<Tag ref={inputRef}>

• ref는 값이 바뀌어도 렌더링이 되지 않는다.
  즉 화면은 바뀌지 않는데 값이 바뀌는 것들은 ref에 저장 후 사용한다.
  class에서 this로 사용했던 setTimeout이나 setInterval등을 주로 사용 (생성후 clear할 때)

예 )

  const timeout = useRef(null);
  const startTime = useRef(0);
  
   timeout.current = setTimeout(() => {} // setTimeout저장
   
   startTime.current = new Date();
   

• 사용 시 current를 붙이는 것을 잊지말자