useRef

1. 함수형 컴포넌트에서 DOM을 직접 참조할 수 있는 방법을 제공하며

   전역적으로 동작하는게 아니라 컴포넌트 내부에서만 작동한다.

​

2. 기본적인 사용법은 useRef()를 통해 ref 인스턴스를 만든 뒤에

   DOM의 ref로 해당 인스턴스 변수를 지정하면 된다.

​

3. 이렇게 ref에 연결된 DOM은 ref.current 로 접근할 수 있다.

​

4. 주의할 점은 useRef()로 만들어지는 인스턴스는 처음에는 아무것도 참조하지 않는

   undefined 상태이고 DOM의 ref 키워드로 useRef() 로 만든 변수를

   지정해야 그제서야 해당 DOM을 참조하게 된다.

   즉, 일단 정상적으로 초기 렌더링이 되어야 해당 DOM을 ref.current 으로 접근할 수 있다.

​

5. 한번 연결된 ref는 React 에 의해 기억되기 때문에

   ref.current 값을 직접 수정하지 않는 이상 해당 컴포넌트가 리렌더링 되더라도 값이 유지된다.

   즉, ref는 컴포넌트가 리렌더링 되더라도 유지하고 싶은 값을 정의할 때 사용하면 된다.

​

6. 헷갈리지 말아야 할 것은 리렌더링과 화면 새로고침은 전혀 다른 개념이다.

   리렌더링은 컴포넌트에만 국한된 새로고침이기 때문에 ref 값이 유지될 수 있지만

   화면 새로고침은 React 자체가 새로 구성되어 초기렌더링이 수행되는 것이기 때문에

   당연히 이때는 ref 값도 초기화된다.

​

7. ref 값을 처음부터 무언가를 참조하는 인스턴스로 만들 수도 있다.

   useRef(1) 와 같이 인자를 추가해서 인스턴스를 생성할 경우

   인자로 추가된 값을 참조하는 인스턴스로 생성되어 ref.current 로 바로 접근할 수 있다.

   이를 통해 리렌더링시에도 유지되는 로컬변수로 활용될 수 있다.

 

8. useRef로 선언한 값은 변경되더라도 컴포넌트가 리렌더링 되지 않기 때문에

    로컬변수로는 활용될 수 있어도 리렌더링을 위한 상태값으로 활용될 수는 없다.

​

사용법은 대략 아래와 같다.

import React, {useRef} from 'react';

const InputSample () => {
   const id = useRef(1); //로컬변수로 활용
   const nameInput = useRef(); //DOM참조

   return(
      <input ref={nameInput} />
   );
}

export default InputSample;