부모가 만든 ref는 함수 컴포넌트의 prop으로 내려가 실제 DOM 노드에 연결될 수 있습니다. 단순한 전달을 위해 forwardRef로 감쌀 필요가 줄었습니다.
데모는 부모 ref가 자식 컴포넌트를 지나 입력 노드에 도달하고 focus 호출이 커서를 놓는 경로를 보여줍니다. 자식이 ref를 DOM에 전달하지 않으면 부모는 해당 노드를 다룰 수 없습니다.
언제 쓰나
부모가 자식 입력의 포커스나 DOM 측정을 직접 제어해야 할 때 사용합니다.
ref를 prop으로 전달
Ref as a prop
React 19에서는 함수 컴포넌트가 ref를 일반 prop처럼 받아 자식 노드에 연결할 수 있습니다.
···
<div class="scene"><div class="chain"><span class="pill" id="parent">parent ref</span><span>→</span><span class="pill" id="child">child prop</span><span>→</span><span class="pill" id="dom">input DOM</span></div><div class="input" id="input">focus target <i></i></div><div class="label" id="note">ref.current.focus()</div></div>.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.chain{display:flex;align-items:center;justify-content:space-between;gap:3px;margin:clamp(16px,6vmin,42px) 0}.chain .pill{text-align:center;min-width:25%;font-size:.85em}.input{margin:auto;border:1px solid var(--line);border-radius:7px;width:75%;padding:.7em;font-family:ui-monospace,monospace}.input i{display:none;width:2px;height:1em;background:var(--accent);vertical-align:-.16em;animation:blink .7s steps(1) infinite}@keyframes blink{50%{opacity:0}}.input.focus{border-color:var(--accent)}.input.focus i{display:inline-block}.label{text-align:center;margin-top:10px}const ids=["parent","child","dom"];let n=0;function tick(){const s=n%3;ids.forEach((id,i)=>document.getElementById(id).classList.toggle("active",i===s));document.getElementById("input").classList.toggle("focus",s===2);document.getElementById("note").textContent=s===2?"input receives focus":"ref travels through props";n++}tick();setInterval(tick,850)