ReactJS - useRef 사용법: 초보자 가이드

안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 React hooks의 세계로 흥미로운 여행을 떠납니다. 특히 useRef hook에 대해 알아보겠습니다. 프로그래밍에 처음이라도 걱정 마세요 - 저는 친절한 안내자로서 단계별로 설명해드리겠습니다. 커피(또는 차, 당신이 좋아하는 음료) 한 잔을 손에 쥐고, 이제 함께 빠져들어 보겠습니다!

useRef는 무엇인가요?

코딩을 시작하기 전에 useRef에 대해 이해해보겠습니다. 마법의 상자를 상상해보세요. 이 상자는 원하는 값을 저장할 수 있고, 컴포넌트가 다시 렌더링되더라도 이 상자의 내용은 변하지 않습니다. 이것이 바로 React에서 useRef가为我们 하는 일입니다!

useRef는 컴포넌트의 re-render를 거치더라도 변하지 않는 가변 참조를 생성하는 방법을 제공하는 hook입니다. 이것은 컴포넌트에 비밀의 공간을 만들어 정보를 저장할 수 있어도, 그 정보가 변할 때 re-render를 유발하지 않는다는 의미입니다.

useRef hook의 서명

이제 useRef hook을 어떻게 사용하는지 살펴보겠습니다:

const refContainer = useRef(initialValue);

여기서 initialValue는 시작하려는 값을 의미하며, refContainer는 current이라는 단일 프로퍼티를 가진 객체입니다. 이 current 프로퍼티는 참조하고자 하는 실제 값을 저장합니다.

이것을 마치 'current'라는 레이블이 달린 특별한 상자라고 생각해보세요. 이 상자 안에 넣는 것은 current의 값을 지정합니다.

ref hook 적용하기

이제 useRef를 실제 상황에서 어떻게 사용할 수 있는지 보겠습니다. 가령, 클릭할 때 자동으로 포커스되고 사용자가 타이핑을 시작할 수 있는 간단한 텍스트 입력을 만들어보겠습니다.

import React, { useRef, useEffect } from 'react';

function AutoFocusInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return <input ref={inputRef} />;
}

이를 단계별로 설명하자면:

1. useRef와 useEffect를 React에서 import합니다.
2. useRef(null)를 사용하여 inputRef라는 참조를 생성합니다.
3. useEffect hook을 사용하여 컴포넌트가 마운트될 때 입력 필드에 포커스를 줍니다.
4. JSX에서 ref 속성을 사용하여 입력 요소에 참조를 연결합니다.

이 컴포넌트가 렌더링될 때, 입력 필드는 자동으로 포커스를 받습니다. 마법 같죠? 하지만 이 것은 마법이 아닙니다 - useRef의 힘이죠!

useRef의 사용 사례

기본 예제를 보았으니, useRef의 다양한 사용 사례를 탐구해보겠습니다. 이 hook은 스위스 아ーノ이刀보다도 다재다능합니다!

1. 이전 값 저장

가끔 이전 렌더링의 값을 유지하고 싶을 때가 있습니다. useRef는 이에 완벽합니다!

import React, { useState, useRef, useEffect } from 'react';

function CounterWithPrevious() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();

useEffect(() => {
prevCountRef.current = count;
}, [count]);

return (
<div>
<p>현재 카운트: {count}</p>
<p>이전 카운트: {prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>인CREMENT</button>
</div>
);
}

이 예제에서 우리는 useRef를 사용하여 카운트의 이전 값을 저장하고 있습니다. 카운트가 변할 때마다 useEffect hook에서 우리의 ref를 업데이트합니다. 이렇게 하면 항상 현재와 이전 카운트에 접근할 수 있습니다.

2. DOM 요소 접근

useRef는 DOM 요소에 직접 접근하는 데에도 매우 유용합니다. 비디오 플레이어 컴포넌트를 예로 들어보겠습니다:

import React, { useRef } from 'react';

function VideoPlayer() {
const videoRef = useRef(null);

const playVideo = () => {
videoRef.current.play();
};

const pauseVideo = () => {
videoRef.current.pause();
};

return (
<div>
<video ref={videoRef} src="path/to/your/video.mp4" />
<button onClick={playVideo}>Play</button>
<button onClick={pauseVideo}>Pause</button>
</div>
);
}

여기서 우리는 useRef를 사용하여 비디오 요소에 참조를 얻고 있습니다. 이를 통해 버튼이 클릭될 때 비디오 요소의 play()와 pause() 메서드를 직접 호출할 수 있습니다.

3. 렌더링 간 값 보존

useRef는 렌더링 간 값을 보존하려고 할 때에도 유용합니다. 예를 들어보겠습니다:

import React, { useState, useRef, useEffect } from 'react';

function IntervalCounter() {
const [count, setCount] = useState(0);
const intervalRef = useRef();

useEffect(() => {
intervalRef.current = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);

return () => clearInterval(intervalRef.current);
}, []);

return <div>카운트: {count}</div>;
}

이 예제에서 우리는 useRef를 사용하여 setInterval의 ID를 저장하고 있습니다. 이를 통해 useEffect hook의 정리 함수에서 인터벌을 지우고 메모리 누수를 방지할 수 있습니다.

결론

이제 useRef의 서명, 적용 방법, 그리고 일반적인 사용 사례를 탐구했습니다. useRef는 React 여정에서 언제나 함께하는 신뢰할 수 있는 동반자입니다. 필요할 때마다 도와줍니다.

이제까지 다루었던 메서드를 요약하겠습니다:

메서드	설명
useRef(initialValue)	제공된 초기 값을 가진 ref 객체를 생성합니다
ref.current	ref의 현재 값을 접근하거나 수정합니다
<element ref={refObject}>	DOM 요소에 ref를 연결합니다

React 여정을 계속하면서 useRef를 다양한 창의적인 방법으로 사용할 수 있을 것입니다. 올바르게 사용하면 React 개발에서 많은 복잡한 문제를 해결할 수 있는 강력한 도구입니다.

React(또는 어떤 프로그래밍 개념이든)을 마스터하려면 연습이 중요합니다. 이 예제를 시도해보고, 자신만의 아이디어를 실험해보세요. 실수를 두려워 말아요. 우리 모두는 그래서 배우고 성장합니다.

행복한 코딩을 기원하며, ref들이 항상 함께하길 바랍니다!

Credits: Image by storyset