React에서 Callback Refs 이해하기: 활용 방법과 장점
React 개발 과정에서 DOM 요소와의 직접적인 상호작용이 필요한 경우가 있다. React는 요소가 렌더링된 후 접근할 수 있는 기능을 refs를 통해 제공한다. 일반적으로 useRef를 사용한 표준 객체 refs를 활용하지만, 추가적인 유연성과 요소의 생명주기 제어가 필요한 경우 callback refs를 사용할 수 있다.
Callback Refs란 무엇인가?
callback refs는 객체형 refs보다 더 세밀한 제어가 가능하다.
- 마운트 시: 요소가 DOM에 마운트될 때, React는 DOM 요소와 함께 ref 함수를 호출한다. 이를 통해 페이지에 요소가 나타난 즉시 액션을 수행할 수 있다.
- 언마운트 시: 요소가 언마운트될 때, React는 null과 함께 ref 함수를 호출하여 해당 요소와 관련된 작업을 정리하거나 취소할 기회를 제공한다.
Callback Refs 사용 시 발생할 수 있는 문제와 해결책
회수 빈도가 잦은 문제는 re-render 시 ref 함수가 매번 새로 생성되는 것이다. 이를 해결하기 위해 useCallback을 사용하여 함수를 메모이제이션할 수 있다. 이 경우 종속성 변화가 없는 한 리렌더링 간에 함수가 변하지 않는다.
실행 순서의 중요성
Callback refs는 DOM 요소가 렌더된 직후, 효과 훅(effecct hooks)이 실행되기 전에 호출된다. 이는 리소스 초기화 및 정리 시 매우 중요하다.
Callback Refs가 해결하는 문제
Callback refs는 관찰자(observer)의 적절한 부착과 분리를 처리하고, 일반 객체형 refs에서 발생할 수 있는 문제를 회피하는 방법을 제공한다.
여러 Refs 결합하기
여러 refs를 하나로 결합해야 할 때도 callback refs를 활용할 수 있다. 이를 통해 내부 및 외부에서 DOM 요소에 접근할 수 있다.
React 19에서의 Callback Refs 변경 사항
React 19에서는 요소가 언마운트 될 때 callback refs의 정리를 자동으로 처리하여 리소스 관리가 더욱 간단해졌다.
표준 Refs와 Callback Refs 선택 가이드
- DOM 요소에 대한 단순 접근이 필요할 때는 표준 refs를 사용한다.
- 요소의 생명주기에 대한 세밀한 제어나 여러 refs의 통합이 필요할 때는 callback refs를 활용한다.
결론
React의 callback refs는 DOM 요소 작업 시 추가적인 유연성과 제어를 제공하는 강력한 도구다. 대부분의 경우 useRef를 통한 표준 객체형 refs가 충분하지만, 복잡한 시나리오에서는 callback refs가 유용할 수 있다.
출처 : 원문 보러가기