useRef에 대해 ChatGPT 답변

by

상사가 쓴 코드에 useRef 가 있는데 읽단 긁어서 ScrollDownButton을 만들었지만, 원리에 대한 이해가 제대로 되지 않았다.

그래서 ChatGPT에게 묻고 받은 답변!

어떻게 보면 개발자에게 이만큼 좋은 친구이자 선생님인 ChatGPT

 

useRef는 React에서 함수 컴포넌트에서 DOM 요소에 접근하거나 특정 값을 유지하는 데 사용되는 Hook입니다. 여러 이유로 useRef를 사용할 수 있습니다:

  1. DOM 요소에 접근:
    • useRef를 사용하면 함수 컴포넌트에서 DOM 요소에 쉽게 접근할 수 있습니다.
    • ref 객체의 current 속성을 사용하여 실제 DOM 요소에 직접 접근할 수 있습니다.
    javascript
    const myRef = useRef(null);

    useEffect(() => {
    // DOM 요소에 접근
    if (myRef.current) {
    myRef.current.focus();
    }
    }, []);

  2. 값의 변경 유지:
    • useRef를 사용하면 값의 변경을 추적할 수 있습니다.
    • 이 값은 리렌더링 간에 계속 유지되며, 컴포넌트가 리렌더링되어도 값이 변경되지 않습니다.
    javascript
    const counterRef = useRef(0);

    useEffect(() => {
    // 값 변경
    counterRef.current += 1;
    }, []);

  3. 컴포넌트의 인스턴스 변수:
    • useRef를 사용하면 함수 컴포넌트에서 클래스 컴포넌트의 인스턴스 변수와 유사한 역할을 할 수 있습니다.
    • 컴포넌트의 렌더링과는 관련이 없는 값들을 저장할 때 사용됩니다.
    javascript
    const dataRef = useRef({ name: 'John', age: 25 });

    useEffect(() => {
    // 값 변경
    dataRef.current.name = 'Jane';
    }, []);

  4. useEffect에서 이전 값 유지:
    • useRef를 사용하면 useEffect 내에서 이전 값에 접근할 수 있습니다.
    • 이전 값을 유지하고 현재 값과 비교하여 특정 동작을 수행할 때 유용합니다.
    javascript
    const prevValueRef = useRef(initialValue);

    useEffect(() => {
    // 이전 값과 현재 값 비교
    if (prevValueRef.current !== currentValue) {
    // 특정 동작 수행
    }

    // 이전 값 업데이트
    prevValueRef.current = currentValue;
    }, [currentValue]);

  5. 함수 컴포넌트에서의 인스턴스 변수 유지:
    • 함수 컴포넌트에서 인스턴스 변수를 유지하려면 useRef를 사용할 수 있습니다.
    javascript
    function MyComponent() {
    const myVarRef = useRef(0);

    // myVarRef.current를 사용하여 인스턴스 변수처럼 사용
    // ...
    }

요약하면, useRef는 주로 DOM 요소에 접근하거나, 값의 변경을 추적하거나, 컴포넌트 내부에서 인스턴스 변수를 유지하는 등의 다양한 상황에서 활용됩니다.

useRef(null)를 사용하는 이유는 주로 초기값으로 null을 넣어서, 참조할 DOM 요소를 가리키지 않는 초기 상태로 설정하기 위함입니다.

  1. 초기화:
    • useRef를 사용할 때 초기값으로 null을 넣으면, 참조할 DOM 요소가 없는 상태로 시작합니다.
    • 이후에 코드에서 필요한 DOM 요소를 참조할 때 해당 ref를 해당 DOM 요소에 연결할 수 있습니다.
  2. 후속 연결:
    • 컴포넌트가 마운트된 후, 또는 특정 이벤트에 따라 ref.current에 실제 DOM 요소를 할당할 수 있습니다.
    • 초기에 null로 설정하면 나중에 언제든지 참조하고자 하는 DOM 요소를 할당할 수 있습니다.
  3. 예시:
    javascript
    const myRef = useRef(null);

    useEffect(() => {
    // 컴포넌트가 마운트된 후, ref.current에 실제 DOM 요소를 할당
    myRef.current = document.getElementById('myElement');
    }, []);

    위의 예시에서는 myRef.current에 getElementById를 통해 얻은 DOM 요소를 할당하고 있습니다. 이렇게 초기에 useRef(null)로 설정하면 동적으로 참조하고자 하는 DOM 요소를 할당하기 용이합니다.

또한, useRef의 주요 용도 중 하나는 함수형 컴포넌트에서 컴포넌트의 상태와 달리 값을 유지하면서 리렌더링 간에 계속 유지할 수 있도록 하는 것입니다. 그래서 useRef를 사용할 때에는 current 속성을 통해 현재 값을 읽거나 수정합니다.

 

Leave a Comment