Ref란?
Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. (React 공식 문서)
리액트에서 Ref를 사용하는 이유
HTML의 경우 id를 사용하여 DOM 요소에 직접 접근합니다.
ex. <div id="exampleID">
하지만 React의 경우 다음과 같은 이유로 위와 같은 방법을 지양하고 있습니다.
-
이유 1 : React는 state로 조작되기 때문에 Dom API와 혼합해서 데이터 및 조작을 할 경우 디버깅이 어려워지고 유지보수가 어려운 코드가 된다.
-
이유 2 : 하나의 컴포넌트가 여러번 생성되는 경우 같은 ID를 가지기 때문에 특정 DOM 객체를 querySelector, getElementById로 판별하기 어렵다.
Ref를 사용하는 경우
Ref를 사용하는 경우는 크게 3가지 경우입니다.
-
React에서 state로만 해결할 수 없고 DOM을 반드시 직접 건드려야 할 경우
-
컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 경우
-
클래스의 인스턴스 프로퍼티와 유사하게 사용하는 경우
DOM을 직접 건드려야 하는 경우
대부분의 경우 state를 사용하여 '어떤 일이 일어나게' 할 수 있습니다. 하지만 다음과 같은 경우 DOM에 직접 접근하는 방법이 필요합니다.
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
- 애니메이션을 직접적으로 실행시킬 때.
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 경우
useRef로 관리하는 변수는 순수 자바스크립트 객체를 생성하기 때문에 매번 렌더링을 할 때 동일한 ref 객체를 제공합니다.
따라서 리렌더링이 발생할 경우 함수 내 로컬 변수들은 초기화되지만 useRef로 관리하는 변수는 값이 초기화 되지 않고 마지막으로 업데이트한 current 값이 유지됩니다.
또한 Ref의 값이 변경되어도 리렌더링이 발생하지 않습니다.
React가 DOM 노드에 ref를 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 대신 콜백 ref를 사용하세요.
리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다.
// 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 useState()와 달리 설정 후 바로 조회할 수 있습니다.
// unmount 했을 시 +1씩 되고 있던 counter 의 값이 alert 됩니다.
function Counter() {
const counter = useRef();
useEffect(() => {
counter.current = 0;
const timer = setInterval(() => {
counter.current += 1;
}, 1000);
return () => {
clearInterval(timer);
alert(counter.current);
};
}, []);
return (
<div>
<p>{counter.current}</p>
</div>
);
}클래스의 인스턴스 프로퍼티와 유사하게 사용하는 경우
useRef()는 DOM ref만을 위한 것이 아닙니다.
“ref” 객체는 현재 프로퍼티가 변경할 수 있고 어떤 값이든 보유할 수 있는 일반 컨테이너입니다.
이는 class의 인스턴스 프로퍼티와 유사합니다.
이벤트 처리에서 인터벌을 지우고 싶을 때 유용합니다.
function Timer() {
const intervalRef = useRef();
useEffect(() => {
const id = setInterval(() => {
// ...
});
intervalRef.current = id;
return () => {
clearInterval(intervalRef.current);
};
});
}
// ...
function handleCancelClick() {
clearInterval(intervalRef.current);
}
// ...Ref 접근
render 메서드 안에서 ref가 엘리먼트에게 전달되었을 때, 그 노드를 향한 참조는 ref의 current 어트리뷰트에 담기게 됩니다.
-
ref가 HTML 엘리먼트에 쓰였다면, 생성된 ref는 자신을 전달받은 DOM 엘리먼트를 current 프로퍼티의 값으로서 받습니다.
-
ref가 커스텀 클래스 컴포넌트에 쓰였다면, ref 객체는 마운트된 컴포넌트의 인스턴스를 current 프로퍼티의 값으로서 받습니다.
-
함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 수 없습니다.
ref 생성 방법
useRef란?
useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.(React 공식 문서)
createRef() Vs useRef()
class형 컴포넌트와 function형 컴포넌트는 리렌더링시 작동 방식의 차이가 있다.
- class형 컴포넌트 : 인스턴스를 생성한 후에 render 코드 블록쪽만 리랜더링 후 다시 실행한다.
- function형 컴포넌트 : 함수 블록안에 있는 모든 것을 리랜더링 시마다 다시 실행한다.
class형 컴포넌트에서 ref를 생성해야 하는 경우 createRef()를 사용한다.
function형 컴포넌트에서 ref를 생성해야 하는 경우 createRef()와 useRef()를 둘 다 사용할 수는 있다.
하지만 createRef()를 사용할 경우 리렌더링 될 때마다 ref 값이 초기화되어 원하는 값을 얻지 못하므로 ref 객체가 유지되는 useRef()를 사용한다.
callback Ref
클래스형 컴포넌트의 경우 React는 ref가 설정되고 해제되는 상황을 세세하게 다룰 수 있는 callback ref라 불리는 ref를 설정하기 위한 또다른 방법을 제공합니다.
만약 리액트 낮은 버전을 사용하고 있어서(react 16.3이전 버전) React.createRef()를 사용할 수 없다면, 콜백 ref를 사용하여 ref를 생성하게 됩니다.
콜백 ref를 사용할 때는 ref 어트리뷰트에 createRef() 를 통해 생성된 ref를 전달하는 대신 함수를 전달합니다.
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = null;
this.setTextInputRef = element => {
this.textInput = element;
};
this.focusTextInput = () => {
// DOM API를 사용하여 text 타입의 input 엘리먼트를 포커스합니다.
if (this.textInput) this.textInput.focus();
};
}
componentDidMount() {
// 마운트 되었을 때 자동으로 text 타입의 input 엘리먼트를 포커스합니다.
this.focusTextInput();
}
render() {
// text 타입의 input 엘리먼트의 참조를 인스턴스의 프로퍼티
// (예를 들어`this.textInput`)에 저장하기 위해 `ref` 콜백을 사용합니다.
return (
<div>
<input
type="text"
ref={this.setTextInputRef}
/>
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}주의점
ref 콜백이 인라인 함수로 선언되어있다면 ref 콜백은 업데이트 과정중에 처음에는 null로 , 그다음에는 DOM 엘리먼트로 총 2번 호출됩니다.
매 랜더링마다 ref 콜백의 새 인스턴스가 생성되므로 React가 이전의 ref를 제거하고 새 ref를 설정해야 하기 때문에 일어납니다.
이러한 현상은 ref 콜백을 클래스에 바인딩된 메서드로 선언함으로써 해결할 수 있습니다.
forwardRef
forward Ref는 컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법입니다.
재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에서는 유용할 수 있습니다.
(애플리케이션 레벨의 컴포넌트에서는 바람직하지만, 어플리케이션 전체에 걸쳐 재사용되는 경향이 있는 “말단” 요소에서는 불편할 수도 있습니다. 또한 focus, 선택 등을 관리하기 위해서는 DOM 노드에 접근하는 것이 불가피 할 수 있습니다.)
React 컴포넌트를 forwardRef() 함수로 감싸주면 해당 컴포넌트는 함수는 두 번째 매개 변수를 갖게 되는데, 이를 통해 외부에서 ref prop을 넘길 수 있습니다.
// Player.jsx
import React, { useRef } from "react";
import Audio from "./Audio";
import Controls from "./Controls";
function Player() {
const audioRef = useRef(null);
return (
<>
<Audio ref={audioRef} />
<Controls audio={audioRef} />
</>
);
}
export default Player;// Audio.jsx
// forwardRef를 사용하여 두번째 매개변수로 ref객체에 audio 엘리먼트를 저장하여 넘겨줄 수 있습니다.
import React, { forwardRef } from "react";
function Audio(prop, ref) {
return (
<>
<audio src={music} ref={ref}>
audio
</audio>
</>
);
}
export default forwardRef(Audio);// Controls.jsx
// ref가 아닌 audio라는 일반적인 prop으로 audioRef 객체가 넘기기 때문에 굳이 forwardRef() 함수를 사용할 필요가 없습니다.
import React from "react";
function Controls({ audio }) {
// audioRef 객체를 통해서 audio 엘리먼트의 play()와 pause() 함수를 호출할 수 있습니다.
const handlePlay = () => {
audio.current.play();
};
const handlePause = () => {
audio.current.pause();
};
return (
<>
<button onClick={handlePlay}>재생</button>
<button onClick={handlePause}>중지</button>
</>
);
}
export default Controls;useImperativeHandle
useImperativeHandle 이란?
useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes)합니다. (React 공식문서)
useImperativeHandle을 사용하는 이유
-
ref가 클래스 컴포넌트에 사용되는 것과 유사하게, 내부 메소드를 외부에 보낼 수 있습니다.
-
부모에게 꼭 자식의 실제 reference를 보내지 않고 우리가 원하는 일종의 proxy reference를 보내는게 가능하므로 컴포넌트간 독립성을 보장할 수 있습니다.
function ParentComponent() {
// 부모는 inputRef.current로 접근하여 자식의 메소드에 접근할 수 있습니다.
const inputRef = useRef();
return (
<>
<FancyInput ref={inputRef} />
<button onClick={() => inputRef.current.realllyFocus()}>포커스</button>
</>
)
}function FancyInput = React.forwardRef((props, ref) {
// 부모는 이 로직에 대해 모르고, 위로 끌어올리지 않고도 그냥 ref.current로 접근하여 사용만 하면 된다
const inputRef = useRef(null);
useImperativeHandle(ref, () => ({
reallyFocus: () => {
inputRef.current.focus();
console.log('Being focused!')
}
}));
// ref는 input을 참조하고 있다.
return <input ref={inputRef} />
})부모는 자식의 DOM에 직접적으로 접근을 하는 것이 아니라 useImperativeHandle로 전달된 자식 내부 메서드에만 접근이 가능해집니다.
정말 유익한 글이네요!