React에서 ref 작업을 위한 useRef 훅

이번 강의에서는 ref를 다루어 보겠습니다. 명확성을 위해 useRef 훅의 작동을 useState 훅과 비교하여 살펴보겠습니다.

버튼이 있는 컴포넌트를 만들어 봅시다:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

컴포넌트에 useState를 임포트합시다:

import { useState } from 'react';

그리고 state 상태를 생성합시다:

const [state, setState] = useState(0);

이제 버튼을 클릭할 때마다 우리의 state가 1씩 증가하도록 해봅시다. 상태 값을 버튼 텍스트에 직접 표시하겠습니다:

<button onClick={handleStateClick}>
	state click: {state}
</button>

버튼 클릭을 처리하는 함수 handleStateClick를 정의합시다:

function handleStateClick() {
	setState(state + 1);
}

버튼을 클릭해 보고 상태 값이 증가하는 것을 확인해 봅시다.

이제 상태 대신 ref를 사용하여 App 컴포넌트를 만들어 봅시다.

먼저, 컴포넌트에 useRef를 임포트합시다:

import { useRef } from 'react';

그리고 ref ref를 생성합시다. useRef 훅은 유일한 속성인 current를 가진 ref 객체를 반환합니다. 이 속성이 앞으로 우리가 주로 다룰 부분입니다. 초기 값을 0로 설정합시다:

const ref = useRef(0);

버튼에 클릭 핸들러를 연결합시다. ref 자체가 아닌 그 속성 current를 읽거나 변경해야 한다는 점을 기억하세요:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

버튼 클릭을 처리하는 함수를 추가합시다. 상태 예제에서와 마찬가지로 여기서는 current를 1씩 증가시킬 것입니다. 상태 값을 변경하려면 setState 함수가 필요하지만, ref의 속성은 직접 작업할 수 있습니다:

function handleRefClick() {
	ref.current = ref.current + 1;
}

이제 버튼을 클릭해 봅시다. 무엇을 보게 되나요? 버튼을 클릭할 때, 처음에 있던 0이 전혀 변하지 않습니다.

물론, 값이 실제로 변경되는지 의심할 수도 있습니다. 한번 확인해 봅시다. 이를 위해 클릭 핸들러 함수에 current 값을 콘솔에 출력하는 코드 줄을 추가해 보겠습니다:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

이제 브라우저에서 콘솔을 열고 버튼을 다시 클릭해 보면, 값이 실제로 매 클릭마다 변경되고 속임수가 없음을 확인할 수 있습니다.

이제 우리는 상태와 달리 ref 값의 변경이 컴포넌트의 리렌더링을 유발하지 않는다는 것을 알 수 있습니다. 그래서 매번 버튼 텍스트에서 초기 값 0을 보게 되는 것입니다.

따라서, 데이터가 렌더링에 사용되는 경우에는 상태에 저장하고, 리렌더링이 필요하지 않은 경우에는 ref 사용이 더 효율적일 수 있습니다.

컴포넌트에 텍스트가 'text'인 문단과 버튼이 있다고 가정합시다. 버튼을 클릭할 때마다 문단 텍스트 끝에 느낌표가 추가되도록 만드세요. 상태를 사용하여 이를 구현하세요.

상태 대신 ref를 사용하여 App 컴포넌트를 생성하세요. 버튼을 눌러도 문단 텍스트가 변경되지 않음을 확인하세요. 또한 문단 텍스트를 콘솔에 출력하는 코드를 추가하고, 콘솔을 열어 실제로 텍스트가 변경되는지 확인하세요.