React에서 useRef 훅의 용도는 무엇인가요?

Q1: React에서 useRef 훅이란 무엇인가요?
A1: useRef는 React 함수형 컴포넌트 내에서 변경 가능한 참조(Reference) 값을 저장할 수 있는 훅입니다. 이 값은 컴포넌트가 다시 렌더링되어도 유지되며, 주로 DOM 요소에 직접 접근하거나 렌더링과 무관한 변수를 저장하는 데 사용됩니다.

Q2: useRef를 사용하는 주요 목적은 무엇인가요?
A2: useRef의 주요 용도는 다음과 같습니다.
1. DOM 요소 접근: 특정 DOM에 직접 접근하여 포커스 설정, 크기 확인, 스크롤 조작 등이 가능합니다.
2. 값 유지: 상태(state)처럼 렌더링을 트리거하지 않는 변수를 저장하여 컴포넌트의 렌더 사이클 간에 값을 유지합니다.
3. 인스턴스 변수 대체: 클래스 컴포넌트의 인스턴스 변수처럼 값을 저장해 함수형 컴포넌트에서도 상태 변화 없이 변수 값을 유지하게 할 수 있습니다.

Q3: useRef와 useState의 차이점은 무엇인가요?
A3: useState는 값이 변할 때마다 컴포넌트를 리렌더링하지만, useRef는 값이 변경되어도 렌더링을 발생시키지 않습니다. 따라서 렌더링과 무관한 값을 저장할 때는 useRef가 더 적합합니다.
Q4: useRef로 저장된 값에 어떻게 접근하나요?
A4: useRef 훅을 통해 반환된 객체는 `.current` 프로퍼티를 가지며, 이곳에 실제 참조값이 저장됩니다. 예를 들어, `const myRef = useRef(null);` 후 `myRef.current`로 접근합니다.

Q5: useRef로 DOM 요소에 접근하려면 어떻게 하나요?
A5: JSX에서 ref 속성에 useRef를 할당하면 해당 DOM 요소가 myRef.current에 저장됩니다. 예: ``. 이후 `myRef.current.focus()`처럼 DOM API를 사용할 수 있습니다.

Q6: useRef 사용 시 주의할 점은 무엇인가요?
A6: useRef에 저장된 값이 변경되어도 컴포넌트는 재렌더링되지 않으므로, UI에 즉시 영향을 주려면 상태 관리(useState)를 사용하는 것이 좋습니다. 또한, ref는 직접 DOM 조작이 필요한 경우에만 활용하는 것이 권장됩니다.

Q7: useRef를 통해 어떤 문제를 해결할 수 있나요?
A7: 비제어 컴포넌트와 같이 DOM 노드 직접 조작이 필요한 상황이나, 렌더링 간 지속적으로 값을 기억해야 하지만 렌더링 트리거는 원하지 않는 경우(useRef로 값을 저장해 렌더링 없이 최신 값을 유지하는 등)에 유용합니다.

`useRef` 훅은 React에서 DOM 요소에 직접 접근하거나, 컴포넌트의 상태를 유지하기 위해 사용되는 훅입니다.

이 훅은 React의 함수형 컴포넌트에서 mutable한 값을 저장할 수 있는 방법을 제공합니다.

`useRef`는 주로 다음과 같은 용도로 사용됩니다.

1. DOM 요소에 접근하기 `useRef`는 특정 DOM 요소에 대한 참조를 생성할 수 있습니다.

이를 통해 React 컴포넌트 내에서 해당 요소에 직접 접근하고 조작할 수 있습니다.

예를 들어, 입력 필드에 포커스를 주거나, 특정 요소의 크기를 측정하는 등의 작업을 할 수 있습니다.

```javascript import React, { useRef } from 'react'; const FocusInput = () => { const inputRef = useRef(null); const handleFocus = () => { if (inputRef.current) { inputRef.current.focus(); } }; return (

Focus the input

); }; ``` 위의 예제에서 `inputRef`는 `` 요소에 대한 참조를 저장하고, 버튼 클릭 시 해당 입력 필드에 포커스를 주는 기능을 구현하고 있습니다.



2. 상태 유지 `useRef`는 렌더링 간에 값을 유지할 수 있는 방법을 제공합니다.

일반적으로 상태를 관리할 때는 `useState`를 사용하지만, `useRef`는 렌더링을 트리거하지 않고도 값을 저장할 수 있습니다.

이는 성능 최적화에 유리할 수 있습니다.

```javascript import React, { useRef } from 'react'; const Timer = () => { const countRef = useRef(0); const handleIncrement = () => { countRef.current += 1; console.log(countRef.current); }; return (

Increment

); }; ``` 위의 예제에서 `countRef`는 버튼 클릭 시마다 증가하는 값을 저장합니다.

이 값은 렌더링에 영향을 주지 않기 때문에, 컴포넌트가 다시 렌더링될 때 이전 값이 유지됩니다.



3. 이전 상태 값 접근 `useRef`를 사용하여 이전 상태 값을 저장하고 접근할 수 있습니다.

이를 통해 컴포넌트의 상태 변화에 따른 이전 값을 쉽게 추적할 수 있습니다.

```javascript import React, { useEffect, useRef, useState } from 'react'; const PreviousValue = ({ value }) => { const prevValueRef = useRef(); useEffect(() => { prevValueRef.current = value; }, [value]); return (

Current Value: {value}

Previous Value: {prevValueRef.current}

); }; ``` 이 예제에서는 `value` prop의 이전 값을 `prevValueRef`를 통해 저장하고, 이를 화면에 표시합니다.



4. 성능 최적화 `useRef`는 렌더링을 트리거하지 않기 때문에, 성능 최적화에 유리합니다.

예를 들어, 대량의 데이터를 처리하거나, 자주 업데이트되는 값을 관리할 때 `useRef`를 사용하면 불필요한 렌더링을 방지할 수 있습니다.

결론 `useRef`는 React에서 매우 유용한 훅으로, DOM 요소에 대한 직접적인 접근, 상태 유지, 이전 값 추적, 성능 최적화 등 다양한 용도로 활용될 수 있습니다.

이를 통해 개발자는 더 효율적이고 직관적인 컴포넌트를 작성할 수 있습니다.

`useRef`를 적절히 활용하면 React 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다.