[React Hooks] useRef

Ref에 current에 저장이 되고 current object는 언제든지 값을 바꿀 수 있다.

컴포넌트가 ref의 값을 유지하고 있어서 컴포넌트가 언마운트 되기 전까지 값을 유지할 수 있다.

[useRef 사용 유형 2가지]

1. 저장공간

       ⇒ state와 비슷하게 어떠한 값을 저장하는 저장 공간으로 사용된다.

#차이점

• State의 변화 → 렌더링 → 컴포넌트 내부 변수들 초기화
• Ref의 변화 → NO렌더링 → 변수들의 값이 유지됨
• State의 변화 → 렌더링 → 그래도 Ref의 값은 유지됨

2. DOM 요소에 접근

예를 들면 로그인창에 들어왔을 때 자동으로 text박스에 포커스가 되어있다면 바로 아이디를 적을 수 있다. (Document.querySelector() 같은 느낌)

State는 누르면 바로 렌더링이 되어 화면에 나온다 하지만 Ref는 콘솔에는 찍히지만 화면에는 나오지 않는다.

• 콘솔에 숫자가 하나씩 더 많은 이유는 우리가 초기값을 1로 주었고 버튼 누르기전에 한번 렌더링이 되기 때문

useRef로 DOM에 접근