[React] React에서 Refs란?

 

 

1. Ref란?

Ref는 DOM노드나 Element에 접근하길 원할 때 사용한다. 클래스형 컴포넌트에선 createRef()로 사용하고, 함수형 컴포넌트에서는 useRef라는 hook을 import해서 사용한다. 개발하다보면 권장하지는 않지만 직접 DOM을 건드려야할 경우들이 생기는데 그럴 때 사용하는 것이다. 

나의 경우에는 주로 Input 요소 또는 Scroll 제어 등을 할 때 Ref를 사용했던 것 같다. React 공식문서에서는 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하라고 권고하고 있다. 

 

2. 함수형 컴포넌트에서 Ref를 사용한 예시

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

const ScrollControlComponent = () => {
  // Ref 생성
  const scrollRef = useRef(null);

  // scroll 위치를 저장할 state
  const [scrollPosition, setScrollPosition] = useState(0);

  // 컴포넌트가 마운트될 때 Ref의 scroll 위치를 감지하고 state에 저장
  useEffect(() => {
    const handleScroll = () => {
      if (scrollRef.current) {
        setScrollPosition(scrollRef.current.scrollTop);
      }
    };

    // 이벤트 리스너 등록
    if (scrollRef.current) {
      scrollRef.current.addEventListener('scroll', handleScroll);
    }

    // 컴포넌트 언마운트 시 이벤트 리스너 제거
    return () => {
      if (scrollRef.current) {
        scrollRef.current.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  // scroll 위치에 따라 내용을 렌더링
  const renderContentBasedOnScroll = () => {
    // 원하는 scroll 위치에 따라 다른 내용을 렌더링할 수 있습니다.
    if (scrollPosition > 100) {
      return <div>Scroll 위치가 100 이상입니다!</div>;
    } else {
      return <div>Scroll 위치가 100 미만입니다.</div>;
    }
  };

  return (
    <div ref={scrollRef} style={{ height: '300px', overflowY: 'scroll', border: '1px solid #ccc' }}>
      {renderContentBasedOnScroll()}
    </div>
  );
};

export default ScrollControlComponent;

 

3. Ref 사용시 주의할 점

1) 컴포넌트 라이프사이클 주기

Ref는 컴포넌트 라이프사이클에서 생성되서 컴포넌트가 마운트된 후에만 유효하다. 초기 렌더링 시에 Ref를 사용하려고 하면 null이 return 된다. 그렇기 때문에 ref에 접근하려고 할때 null이 아님을 확인해야한다. 

2) 비동기 처리시 주의

Ref를 사용할 때 비동기 작업에서 주의해야 합니다. 예를 들어, API 호출이나 setTimeout 등의 비동기 작업에서 Ref를 업데이트하려면 컴포넌트가 언마운트되기 전에 확인하는 등의 방어 코드를 추가해야한다.

3) Ref의 불변성 유지

Ref는 일반적으로 불변성을 유지하므로 Ref 객체를 직접 수정하면 React에서 제대로 감지를 못할 수도 있다. 만약 Ref를 업데이트해야 할 경우, current 속성을 사용하여 업데이트 해야한다.