면접준비! React19에서 useRef는 뭐가 달라졌을까?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 개발자, Hooks 및 리액트 최신 기능을 활용하고자 하는 중급 이상 개발자

핵심 요약

• forwardRef 제거 - 컴포넌트에 ref를 전달할 때 forwardRef가 더 이상 필요 없음
• ref 콜백에서 cleanup 함수 지원 - useRef로 반환된 cleanup 함수가 DOM 언마운트 시 자동 실행
• useRef의 다용도성 - DOM 참조 외에도 useCallback, useMemo 등 값 저장 및 상태 관리에 활용 가능

섹션별 세부 요약

###React 19의 핵심 변화들

• forwardRef 사용 생략 가능:

```tsx

function Input({ placeholder, ref }) { return ; }

```

• useRef로 값 저장 가능:

```tsx

const timerRef = useRef(null);

```

###ref 콜백의 실행 타이밍

• 실행 순서:

1. 컴포넌트 렌더링
2. ref 콜백 실행 (DOM 마운트 시)
3. useEffect 실행

###심화!! 실전 활용법

• useOutsideClick 구현:

```tsx

const onOutsideClick = useOutsideClick();

```

• useFade 애니메이션 구현:

```tsx

const fadeRef = useFade({ duration: 300 });

```

• mergeRefs 활용:

```tsx

export function mergeRefs(...refs: React.Ref[]): React.RefCallback { ... }

```

###React 19의 핵심 기능 요약

• forwardRef 제거로 보일러플레이트 감소
• cleanup 함수 지원으로 리소스 관리 강화
• DOM 생명주기와 밀접한 연동으로 타이밍 제어 정확성 향상

결론

• useCallback으로 감싸는 것이 필수 - ref 콜백이 리렌더링 시마다 실행되므로 useCallback 사용 권장
• Svelte의 인사이트 활용 - mergeRefs 및 useEvent 패턴(최신 ref pattern)으로 애니메이션, outside click 처리 가능
• React 19의 ref 기능 활용 - 선언적이고 효율적인 코드 작성 가능