[React] useRef 복습하기!

useRef란 뭘까? 

`useRef` 는 이름부터 Reference(참조) 를 만드는 Hook입니다.

또,, `useState`와 비슷합니다.. 헷갈릴 수 있지만 사용 목적과 동작 방식은 꽤 다릅니다.

 

useRef VS useState

항목	useRef	useState
역할	참조 객체 생성	상태 값(State) 저장
값 변경 시	리렌더링 안 됨	리렌더링 발생
주요 용도	DOM 접근 및 조작 가능, 값 유지용 변수	UI 상태 관리 (ex. 토글, 입력값)
값 접근 방식	`ref.current`	state 변수 이름 그대로

 

어떻게 사용할까요 ? 

import { useRef } from "react";

const refObj = useRef(); // 초기값은 undefined

 

해당 refObj 를 console.log 로 찍어보면 

 

`{ current : undefined }` current 라는 프로퍼티를 갖는 객체가 생성되는데요 이 객체가 바로 Ref 객체입니다

Ref 객체란 Current 라는 프로퍼티에 현재 보관할 값을 담아두기만 하는 단순한 js 객체..!

 

그래서 useRef( 초기값 ) 을 설정해주게 되면

 

`{ current : 초기값 }` 값을 저장하고 있는 레퍼런스 객체가 출력이 된다.

또한 점 표기법으로 `refObj.current` 로 값을 출력할 수 있다.

 

중요한 특징은. 

ref.current를 직접 수정해도 컴포넌트는 리렌더링 되지 않는다!

그래서 화면에 보여주진 않지만, 계속 기억하고 있어야 할 값에 유용하다!

 

useRef() 를 사용한 DOM 제어 예시 : focus 사용.

import { useRef } from "react";


const inputRef = useRef();

const onSubmit = () => {
	if(input.name === "") {
    	inputRef.current.focus(); // DOM 요소 직접 제어.
    }
}

return (
	<div>
    	<input ref={inputRef} name="name" />
    </div>

해당 코드를 해석해 보면

• useRef() 로 inputRef 라는 레퍼런스를 생성
• <input> 태그에 ref={inputRef} 로 연결
• inputRef.current 는 실제 DOM 요소를 가르킨다.
• onSubmit 함수에셔 focus() 를 호출해 커서를 이동시킨다!

 

 

굳이 useRef를 써야할까?

예를 들어 count 관련 기능을 추가하려고 할 때

 

 let 으로 count 변수 선언해서 카운터를 집계하면 안될까? 

 

근데 문제는

React는 이벤트가 발생하면 컴포넌트를 다시 렌더링하게 된다. 

즉 함수형 컴포넌트는 다시 호출된다고 생각하면 된다.

 

그래서 `let count = 0;` 이 코드도 초기화가 되기때문에 계속 0으로 리셋이 되는거다!

 

그래서 필요한게 `useRef`

`useRef` 는 값이 리렌더링 되어도 리셋이 되지 않아요!

 

 

그러면? 전역변수로 let count를 설정해주면 되잖아?

 

전역변수로 컴포넌트 외부로 변수 설정해서 count 하면 가능은 한데, 

해당 변수는 동일 컴포넌트로 개별적으로 관리되는 게 아니라

 

두 번 이상 사용하게 되면 아주 치명적인 오류가 발생하게 된다.