[React] useRef 개념 및 실습

[React] useRef 개념 및 실습

useRef 개념 및 실습

(+ 작성하다 보니 전부 존댓말로 작성하여 그냥 앞으로 존댓말로 작성하겠습니다.)

이번 게시글에서는 새로운 hook useRef에 대해 알아보겠습니다.

useRef의 사용 방법과 useState의 차이점에 대해 알아보겠습니다.

 

전체 코드 보러 가기 : 링크

◆ DOM 접근

전체 코드 보러 가기 : 링크

 

useRef는 DOM에 접근하고 싶을 때 많이 사용합니다.

JavaScript에서 document.querySelector() 와 같은 함수를 대신 사용한다고 생각하시면 됩니다.

 

그럼 어떻게 DOM에 접근할 수 있을까요?

DOM에 접근하는 방법은 아주 간단합니다.

useRef 변수를 선언한 후 DOM에 ref로 연결만 해주면 됩니다.

아래 코드를 확인해봅시다.

위 코드를 보면 input element에 ref로 inputRef를 연결해주었습니다.

button을 클릭하면 inputRef.current를 출력합니다.

inputRef.current에는 input element가 담겨져 있는 것을 확인할 수 있습니다.

즉 ref의 값에 접근할 때는 ref.current까지 작성해주어야 합니다.

 

보통 이렇게 DOM에 접근하여 focus 하는 곳에 많이 사용됩니다.

예를들어 회원가입 폼을 작성하는데 필수 값을 입력하지 않은 경우

해당 DOM으로 focus를 해주는 경우에 사용합니다.

아래 focus 하는 코드를 확인해봅시다.

 

위 코드를 실행한 결과로 inputRef.current에 input element가 있는 것은 확인했습니다.

해당 element를 focus 하는 방법은 내장 함수인 focus를 사용하면 간단합니다.

 

이번에는 div에 focus 해봅시다.

분명히 input과 동일하게 focus를 주었는데 동작하지 않습니다.

이러한 경우 tabIndex를 넣어주어야 동작합니다.

아래 수정된 코드와 결과를 확인해봅시다.

이제 잘 동작하는 것을 확인할 수 있습니다.

 

◆ useState vs useRef

전체 코드 보러 가기 : 링크

 

이번에는 state와 ref의 차이를 확인해보겠습니다.

state는 setState로 값을 변경하는 경우

컴포넌트가 렌더링 되는 특징을 가지고 있었습니다.

그러나 ref의 값을 변경하면 어떻게 될까요?

우선 state를 가볍게 복습할 겸 input의 값을 state로 변경하는 코드를 확인해봅시다.

renderCount로 렌더링이 잘 되는 것을 확인하였고 값도 잘 변경이 됩니다.

그러나 useRef를 사용하면 어떻게 될까요?

아래 코드를 확인해봅시다.

이상하게 렌더링이 되지 않지만 값을 확인하였을 때는 데이터를 가지고 있습니다.

이것이 state와 ref의 차이점입니다.

state는 setState로 변경 시 렌더링이 발생합니다.

그러나 ref는 값을 변경하여도 렌더링이 발생하지 않습니다.

 

여기서 많이 사용되는 용어가 있습니다.

controlled, uncontrolled component 입니다.

controlled component : state로 input 데이터를 다루는 컴포넌트

다시 말하면 react에서 폼을 제어할 수 있는 컴포넌트

uncontrolled component : dom 자체에서 폼을 제어하는 컴포넌트

데이터를 관리하는 주체에 따라 2개로 나뉘어집니다.

 

정리하자면 useRef는 DOM을 조작할 때 사용된다.

많이 사용되는 곳 중 1개는 element를 focusing할 때이다.

ref는 값이 변경되어도 렌더링이 되지 않는다.

 

◆ 정리 및 다음 게시글 소개

이번 게시글에서는 useRef의 사용 방법을 알아보았습니다.

1. useRef는 React에서 DOM에 접근할 때 사용된다.

2. useRef는 값이 변경되어도 렌더링이 되지 않는다.

 

+ focus가 되지 않는 경우 tabIndex를 추가해주어야 한다.

+ 값 관리의 주체에 따라 controlled, uncontrolled 컴포넌트로 나뉜다.

 

일단 이번 게시글에서는 위 내용 정도만 기억하고 넘어가시면 될 것 같습니다.

다음 게시글에서는 useEffect hook에 대해 알아보겠습니다.

 

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.