useRef()는 React 함수형 컴포넌트에서 DOM 요소에 접근하거나, 다른 목적으로 컴포넌트 내에서 변수를 유지하는 데 사용되는 Hook입니다.
React 18에서는 useRef()를 사용하여 컴포넌트 내부에서 mutable한 값, 즉 변경 가능한 값을 관리할 수 있습니다. 이전에는 클래스 컴포넌트에서 this.state나 this.instanceVariable과 같은 mutable한 값들을 관리했지만, 이제 함수형 컴포넌트에서도 useRef()를 사용하여 이를 처리할 수 있습니다.
useRef()는 함수형 컴포넌트에서 클래스 컴포넌트의 인스턴스 변수와 유사한 역할을 합니다. 그러나 인스턴스 변수와 달리 useRef()를 사용하여 관리하는 변수의 변경은 컴포넌트 렌더링을 다시 하지 않습니다.
useRef()는 보통 DOM 요소에 접근하기 위해 사용됩니다. 예를 들어, 다음과 같이 useRef()를 사용하여 <input> 요소에 접근할 수 있습니다.
import { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
function handleClick() {
inputRef.current.focus();
}
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Focus the input</button>
</div>
);
}이 코드에서는 inputRef라는 변수를 선언하고, 이를 <input> 요소의 ref prop에 할당합니다. useRef()의 초기값은 null로 설정됩니다. 그 다음으로, handleClick() 함수에서는 inputRef.current를 사용하여 <input> 요소에 접근하고, focus() 메서드를 호출하여 해당 요소에 포커스를 설정합니다.
또한 useRef()를 사용하여 컴포넌트 내에서 변수를 유지할 수도 있습니다. 이를 통해 컴포넌트 렌더링 간에 상태를 유지하거나, 이전 값과 현재 값을 비교하고, 다른 목적으로 사용할 수 있습니다. 예를 들어, 다음과 같이 useRef()를 사용하여 컴포넌트의 이전 상태를 저장할 수 있습니다.
import { useRef, useEffect } from 'react';
function MyComponent({ value }) {
const prevValueRef = useRef(null);
useEffect(() => {
prevValueRef.current = value;
}, [value]);
const prevValue = prevValueRef.current;
return (
<div>
<p>Current value: {value}</p>
<p>Previous value: {prevValue}</p>
</div>
);
}
죄송합니다. 앞 부분을 놓쳐서 다시 적겠습니다.
useRef()를 사용하여 prevValueRef 변수를 만들고, 이 변수를 사용하여 value의 변경을 감시합니다. useEffect()는 value가 변경될 때마다 호출됩니다. useEffect()의 콜백 함수에서는 prevValueRef.current를 사용하여 이전 값을 value로 업데이트합니다. 마지막으로, prevValue 변수를 사용하여 이전 값을 렌더링합니다.
useRef()를 사용하여 컴포넌트에서 변수를 관리하는 방법은 무궁무진합니다. 예를 들어, useRef()를 사용하여 컴포넌트 내부의 특정 값을 추적하거나, 다른 컴포넌트나 모듈에서 공유할 수 있는 값을 저장하는 등 다양한 방법으로 활용할 수 있습니다.
사용시 주의점
하지만 주의해야 할 점도 있습니다. useRef()를 사용하여 상태를 관리하면, 해당 상태가 변경되었을 때 컴포넌트의 렌더링이 다시 발생하지 않습니다. 이는 렌더링 간에 변수 값이 변경되어도, 화면에 반영되지 않을 수 있다는 것을 의미합니다. 때문에, 변경되는 값을 렌더링에 반영하고 싶다면, 상태(State)나 prop을 사용하는 것이 좋습니다.
이상으로 useRef()에 대한 설명을 마칩니다. useRef()는 React Hooks 중 하나로, 함수형 컴포넌트에서 DOM 요소에 접근하거나, 다른 목적으로 컴포넌트 내에서 변수를 유지하는 데 사용됩니다. useRef()를 사용하여 컴포넌트 내부에서 mutable한 값을 관리할 수 있으며, 컴포넌트 렌더링 간에 상태를 유지할 수도 있습니다. 단, 이전 값과 현재 값을 비교하거나, 다른 목적으로 사용할 수 있습니다.
내저장소 바로가기 luxury515
'Front-end > React.js' 카테고리의 다른 글
| React Hook : useLayoutEffect() (0) | 2023.04.15 |
|---|---|
| React Hook : useImperativeHandle() (0) | 2023.04.15 |
| React Hook : useMemo() (0) | 2023.04.15 |
| React Hook : useCallback() (0) | 2023.04.15 |
| React Hook : useReducer() (0) | 2023.04.15 |