이번 포스트는 React의 Hook 중 하나인 useRef에 대해서 작성해보려고 한다.

1. useRef란?

• useRef는 변수 관리 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다.
• 바닐라 자바스크립트를 사용 할 때, 우리가 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다. React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴 때 useRef라는 React Hook을 사용한다.

2. 변수 관리

위 코드에는 useState를 사용해 값을 저장한 stateCount, useRef를 사용해 값을 저장한 refCount, 변수를 통해 값을 저장한 varCount가 있다.

버튼을 누르면 각각의 값이 올라가고 콘솔창에 출력이 된다. 확인해보면 ref up을 아무리 눌러도 콘솔창에만 출력되고 화면에 렌더링이 되지 않는것을 확인할 수 있다.

하지만 state up 버튼을 누르면 화면이 렌더링되면서 올려놨던 refCount값도 화면에 출력되게 된다. 그 이유는 useRef로 관리하는 값은 state와는 다르게 변해도 화면이 다시 렌더링되지 않기 때문이다. 하지만 값은 기억하고 있다는 특징이 있다. 즉 다시 렌더링 되어도 초기값으로 돌아가지 않는다.

var 같은 경우 var up 버튼을 통해 변수값을 아무리 높혀도 state up 버튼을 통해 렌더링을 하면, 컴포넌트 내부에 있는 let varCount = 0; 이 계속 실행되기에 값이 초기화된다.

3. DOM요소 선택

위 코드에서는 input 요소를 ref 속성을 이용하여 선택해 놓았다. 그리고 focus버튼을 클릭하면 input 요소로 접근해서 focus를 하도록 했다. focus버튼을 누르면 input 창에 focus되는 것을 확인할 수 있다.

focus 버튼을 누르고 콘솔창에 useRef를 통해 선택된 DOM 요소를 확인할 수 있다.

마치며

이번 포스트에서는 React의 Hook 중 하나인 useRef 대해서 알아보았다. 다음 포스트에서는 React의 또 다른 Hook 중 하나인 useContext에 대해서 알아보자.
그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧