React.useRef()로 변경할 수 있는 값

React.useRef() hook is basically used to refer to DOM elements and also to create mutable values persisted between component re-rendering.

첫 번째 사용 사례는 매우 간단해 보이지만 두 번째 사용 사례는 어떻습니까.!? 그것이 무엇이며 어떻게 작동하는지 살펴 보겠습니다.

먼저 Mutable이란 무엇입니까?

변경 가능한 값, 즉 생성된 동일한 메모리 공간에서 변경할 수 있는 값을 포함하는 변수 유형이라고 할 수 있습니다.

In JavaScript, only arrays and objects are mutable.

useRef() 작동 중

React.useRef()는 인수일 뿐이므로 초기 값을 취하고 reference라는 특수 객체를 반환합니다. 참조 값을 보유하는 current라는 단일 속성이 있습니다.

const reference = React.useRef(initialValue);
console.log(reference);   // { current : <referenceValue> }

여기서 참조 객체는 변경 가능합니다. 즉, reference.current를 사용하여 참조 값에 액세스하고 reference.current를 새 값이나 변수에 할당하여 업데이트할 수 있습니다. 뭐! 이게 뭐가 그렇게 특별해?🤷‍♂️

전문

useRef() 참조에 대해 기억해야 할 두 가지 중요한 동작이 있습니다.

참조 값은 구성 요소 재렌더링 간에 동일하게 유지됩니다(지속).

참조 값을 업데이트해도 구성 요소가 다시 렌더링되지 않습니다.

예 - 로깅 버튼 클릭

import { useRef } from 'react';
const LogButtonClicks = () => {
    const countRef = useRef(0);

    const handleClick = () => {
        countRef.current++;
        console.log(`${countRef.current} button clicks`);
    }

    console.log("Component rendered");

    return (
        <button onClick={handleClick}>Click me!</button>
    )
}

여기const countRef = useRef(0)는 0으로 초기화된 참조countRef를 생성합니다. 이 참조 객체를 사용하여 버튼 클릭 수를 저장합니다. 버튼을 클릭하면 참조 값이 업데이트되고 콘솔에 기록됩니다. 콘솔에서 "구성 요소 렌더링"이 한 번만(초기 렌더링 중에) 기록된다는 사실을 눈치채셨을 수 있습니다. 즉, 더 정확하게는 참조 값 업데이트가 구성 요소 다시 렌더링을 트리거하지 않는다는 의미입니다.

이것은 우리가 상태와 참조의 차이점에 대해 생각하게 합니다.

상태와 참조의 차이점

상태를 업데이트하면 구성 요소가 다시 렌더링되지만 참조를 업데이트하면 트리거되지 않습니다.

상태 업데이트는 비동기식이며(상태 변수는 다시 렌더링한 후 업데이트됩니다. 자세한 설명은 this 참조) 참조 업데이트는 동기식입니다.

경험 법칙 없음

useRef는 프레임워크의 이스케이프 해치이며 반드시 필요한 경우가 아니면 사용되지 않습니다. 그러나 인프라 데이터를 저장하는 데 사용할 수 있지만 프레젠테이션 데이터를 저장하는 데는 사용할 수 없습니다. 또한 DOM 노드에 액세스할 때 이를 염두에 두십시오.

감사합니다 ❤

저와 연결하여 웹 세계를 함께 탐험해 봅시다.