작성한 질문수 3

1

안녕하세요, 소플입니다.

useRef() 훅은 일반적으로 DOM element에 접근하기 위해서 사용합니다.

그래서 특정 element에 대해 reference를 하기 위한 목적이라는 뜻에서 훅의 이름이 useRef()인 것이라고 이해하시면 됩니다.

그래서 작성해주신 코드에서 inputElem은 input element에 접근하기 위해 사용하는 것이 맞습니다.

하지만 useRef() 훅은 단순히 특정 element에 reference를 하기 위해서만 사용하는 것이 아니라,

리액트 함수 컴포넌트 내부에서 렌더링과 관계없는 값을 저장하기 위한 용도로도 많이 사용합니다.

예를 들면, 아래와 같이 컴포넌트를 작성하게 되면 MyComponent가 렌더링 될 때마다 value라는 변수가 매번 재할당 됩니다.

import { useRef } from 'react';

function MyComponent() {
    const value = 0;

    return <div>Hello, world!</div>;
}

export default MyComponent;

이말은 곧 reference가 변경된다고도 할 수 있으며,

만약 useEffect(), useMemo() 등의 훅의 dependency array에 해당 변수를 넣게 되면 매번 값이 변한 것으로 판단한다는 뜻이기도 합니다.

그래서 이러한 상황을 방지하고 렌더링과 관계없이 값을 저장하기 위한 용도로 useRef() 훅을 아래와 같이 사용합니다.

import { useRef } from 'react';

function MyComponent() {
    const value = useRef(0);

    return <div>Hello, world!</div>;
}

export default MyComponent;

그리고 useRef() 훅을 사용할 경우 해당 element의 렌더링 시점에 별도로 callback을 받을 수 없습니다.

그렇기 때문에 만약 element가 렌더링 되는 시점에 원하는 동작을 실행하고 싶다면 Callback Ref 라고 부르는 방식을 사용해야 합니다.

이 방식은 ref에 reference 객체가 아닌 함수를 넣어서 해당 element가 렌더링 된 이후에 수행하고 싶은 작업들을 함수 내부 구현하는 것입니다.

정리하면, element의 ref 속성에는 useRef() 훅으로 생성한 reference 객체 또는 함수를 넣을 수 있다 라고 이해하시면 됩니다.

아래 리액트 공식 문서를 참고하시면 이해하는데 더 도움이 되실 겁니다.

https://react.dev/reference/react-dom/components/common#ref-callback

감사합니다.

function MyComponent() {
    return (
        <div
            ref={(node) => {
                console.log(node);
            }}>
            Hello, world!
        </div>
    );
}

export default MyComponent;

import { useCallback } from 'react';

function MyComponent() {
    const myRef = useCallback((node) => {
        console.log(node);
    }, []);

    return <div ref={myRef}>Hello, world!</div>;
}

export default MyComponent;