forwardRef ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ref.๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์˜ DOM ๋…ธ๋“œ๋ฅผ ๋…ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const SomeComponent = forwardRef(render)

๋ ˆํผ๋Ÿฐ์Šค

forwardRef(render)

์ปดํฌ๋„ŒํŠธ๊ฐ€ ref๋ฅผ ๋ฐ›์•„ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌํ•˜๋„๋ก ํ•˜๋ ค๋ฉด forwardRef()๋ฅผ ํ˜ธ์ถœํ•˜์„ธ์š”.

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
// ...
});

์•„๋ž˜์—์„œ ๋” ๋งŽ์€ ์˜ˆ์‹œ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.

๋งค๊ฐœ๋ณ€์ˆ˜

  • render: ์ปดํฌ๋„ŒํŠธ์˜ ๋ Œ๋”๋ง ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. React๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ props์™€ ref๋กœ ์ด ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜ํ™˜ํ•˜๋Š” JSX๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

๋ฐ˜ํ™˜๊ฐ’

forwardRef๋Š” JSX์—์„œ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ ์ •์˜๋œ React ์ปดํฌ๋„ŒํŠธ์™€ ๋‹ค๋ฅด๊ฒŒ, forwardRef๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ref prop๋„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์˜

  • Strict Mode์—์„œ React๋Š” ์‹ค์ˆ˜๋กœ ๋ฐœ์ƒํ•œ ๊ฒฐํ•จ์„ ์ฐพ๊ธฐ ์œ„ํ•ด ๋ Œ๋”๋ง ํ•จ์ˆ˜๋ฅผ ๋‘ ๋ฒˆ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์ „์šฉ ๋™์ž‘์ด๋ฉฐ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์—๋Š” ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ Œ๋”๋ง ํ•จ์ˆ˜๊ฐ€ ์ˆœ์ˆ˜ํ•จ์ˆ˜์ธ ๊ฒฝ์šฐ(๊ทธ๋ž˜์•ผ๋งŒ ํ•ฉ๋‹ˆ๋‹ค.) ์ปดํฌ๋„ŒํŠธ ๋กœ์ง์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ˜ธ์ถœ ๊ฒฐ๊ณผ ์ค‘ ํ•˜๋‚˜์˜ ๊ฒฐ๊ณผ๋Š” ๋ฌด์‹œ๋ฉ๋‹ˆ๋‹ค.

render ํ•จ์ˆ˜

forwardRef๋Š” render ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ๋ฐ›์Šต๋‹ˆ๋‹ค. React๋Š” props์™€ ref์™€ ํ•จ๊ป˜ ์ด ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

const MyInput = forwardRef(function MyInput(props, ref) {
return (
<label>
{props.label}
<input ref={ref} />
</label>
);
});

๋งค๊ฐœ๋ณ€์ˆ˜

  • props: ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ „๋‹ฌํ•œ props์ž…๋‹ˆ๋‹ค.

  • ref: ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ „๋‹ฌํ•œ ref ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์ž…๋‹ˆ๋‹ค. ref๋Š” ๊ฐ์ฒด๋‚˜ ํ•จ์ˆ˜์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ref๋ฅผ ์ „๋‹ฌํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ null์ด ๋ฉ๋‹ˆ๋‹ค. ์ „๋‹ฌ๋ฐ›์€ ref๋ฅผ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•˜๊ฑฐ๋‚˜ useImperativeHandle.์— ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ฐ˜ํ™˜๊ฐ’

forwardRef๋Š” JSX์—์„œ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ ์ •์˜๋œ React ์ปดํฌ๋„ŒํŠธ์™€ ๋‹ค๋ฅด๊ฒŒ forwardRef ์— ์˜ํ•ด ๋ฐ˜ํ™˜๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ref prop๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


์‚ฌ์šฉ๋ฒ•

๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์— DOM ๋…ธ๋“œ ๋…ธ์ถœํ•˜๊ธฐ

๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ ์ปดํฌ๋„ŒํŠธ์˜ DOM ๋…ธ๋“œ๋Š” ๋น„๊ณต๊ฐœ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋•Œ๋กœ๋Š” ๋ถ€๋ชจ์— DOM ๋…ธ๋“œ๋ฅผ ๋…ธ์ถœํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด focus ํ•˜๊ธฐ ์œ„ํ•ด ๋…ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด ์ปดํฌ๋„ŒํŠธ ์ •์˜๋ฅผ forwardRef()๋กœ ๊ฐ์‹ธ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
const { label, ...otherProps } = props;
return (
<label>
{label}
<input {...otherProps} />
</label>
);
});

props ๋‹ค์Œ์— ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ref๋ฅผ ๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋…ธ์ถœํ•˜๋ ค๋Š” DOM ๋…ธ๋“œ์— ์ด๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
const { label, ...otherProps } = props;
return (
<label>
{label}
<input {...otherProps} ref={ref} />
</label>
);
});

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ถ€๋ชจ์ธ Form ์ปดํฌ๋„ŒํŠธ๊ฐ€ MyInput์— ์˜ํ•ด ๋…ธ์ถœ๋œ <input> DOM ๋…ธ๋“œ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function Form() {
const ref = useRef(null);

function handleClick() {
ref.current.focus();
}

return (
<form>
<MyInput label="Enter your name:" ref={ref} />
<button type="button" onClick={handleClick}>
Edit
</button>
</form>
);
}

์ด Form ์ปดํฌ๋„ŒํŠธ๋Š” MyInput ์—๊ฒŒ ref๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. MyInput ์ปดํฌ๋„ŒํŠธ๋Š” ํ•ด๋‹น ref๋ฅผ <input> ํƒœ๊ทธ์— ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ Form ์ปดํฌ๋„ŒํŠธ๋Š” ํ•ด๋‹น <input> DOM ๋…ธ๋“œ์— ์ ‘๊ทผํ•˜์—ฌ focus()๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ DOM ๋…ธ๋“œ์˜ ref๋ฅผ ๋…ธ์ถœํ•˜๋ฉด ๋‚˜์ค‘์— ์ปดํฌ๋„ŒํŠธ์˜ ๋‚ด๋ถ€๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ๊ฐ€ ๋” ์–ด๋ ค์›Œ์ง„๋‹ค๋Š” ์ ์— ์œ ์˜ํ•˜์„ธ์š”. ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฒ„ํŠผ์ด๋‚˜ ํ…์ŠคํŠธ input๊ณผ ๊ฐ™์ด ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ €์ˆ˜์ค€ ์ปดํฌ๋„ŒํŠธ์—์„œ DOM ๋…ธ๋“œ๋ฅผ ๋…ธ์ถœํ•˜์ง€๋งŒ, ์•„๋ฐ”ํƒ€๋‚˜ ๋Œ“๊ธ€ ๊ฐ™์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ ˆ๋ฒจ์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ๋…ธ์ถœํ•˜๊ณ  ์‹ถ์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์˜ˆ์ œ ์‚ดํŽด๋ณด๊ธฐ

์˜ˆ์ œ 1 of 2:
ํ…์ŠคํŠธ input์— ์ดˆ์  ๋งž์ถ”๊ธฐ

๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด input์— ํฌ์ปค์Šค ๋ฉ๋‹ˆ๋‹ค. Form ์ปดํฌ๋„ŒํŠธ๋Š” ref๋ฅผ ์ •์˜ํ•˜๊ณ  ์ด๋ฅผ MyInput ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. MyInput ์ปดํฌ๋„ŒํŠธ๋Š” ํ•ด๋‹น ref๋ฅผ input์œผ๋กœ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด Form ์ปดํฌ๋„ŒํŠธ๊ฐ€ input์˜ ํฌ์ปค์Šค๋ฅผ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import { useRef } from 'react';
import MyInput from './MyInput.js';

export default function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}


์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ†ตํ•ด ref ์ „๋‹ฌํ•˜๊ธฐ

ref๋ฅผ DOM ๋…ธ๋“œ๋กœ ์ „๋‹ฌํ•˜์ง€ ์•Š๊ณ  MyInput๊ณผ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const FormField = forwardRef(function FormField(props, ref) {
// ...
return (
<>
<MyInput ref={ref} />
...
</>
);
});

MyInput ์ปดํฌ๋„ŒํŠธ๊ฐ€ <input>์— ref๋ฅผ ์ „๋‹ฌํ•˜๋ฉด FormField์˜ ref๋Š” ํ•ด๋‹น <input>์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function Form() {
const ref = useRef(null);

function handleClick() {
ref.current.focus();
}

return (
<form>
<FormField label="Enter your name:" ref={ref} isRequired={true} />
<button type="button" onClick={handleClick}>
Edit
</button>
</form>
);
}

Form ์ปดํฌ๋„ŒํŠธ๋Š” ref๋ฅผ ์ •์˜ํ•˜๊ณ  ์ด๋ฅผ FormField์— ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. FormField ์ปดํฌ๋„ŒํŠธ๋Š” ํ•ด๋‹น ref๋ฅผ MyInput์œผ๋กœ ์ „๋‹ฌํ•˜๊ณ , ์ด ์ปดํฌ๋„ŒํŠธ๋Š” <input> DOM ๋…ธ๋“œ๋กœ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด Form์ด <input> DOM ๋…ธ๋“œ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

import { useRef } from 'react';
import FormField from './FormField.js';

export default function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <FormField label="Enter your name:" ref={ref} isRequired={true} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}


DOM ๋…ธ๋“œ ๋Œ€์‹  ๋ช…๋ นํ˜• ํ•ธ๋“ค ๋…ธ์ถœํ•˜๊ธฐ

์ „์ฒด DOM ๋…ธ๋“œ๋ฅผ ๋…ธ์ถœํ•˜๋Š” ๋Œ€์‹  ์ œํ•œ๋œ ๋ฉ”์„œ๋“œ ์ง‘ํ•ฉ๊ณผ ํ•จ๊ป˜ ๋ช…๋ นํ˜• ํ•ธ๋“ค์ด๋ผ๊ณ  ํ•˜๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด๋ฅผ ๋…ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด DOM ๋…ธ๋“œ๋ฅผ ๋ณด์œ ํ•  ๋ณ„๋„์˜ ref๋ฅผ ์ •์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

const MyInput = forwardRef(function MyInput(props, ref) {
const inputRef = useRef(null);

// ...

return <input {...props} ref={inputRef} />;
});

์ „๋‹ฌ๋ฐ›์€ ref๋ฅผ useImperativeHandle์— ์ „๋‹ฌํ•˜๊ณ  ๋…ธ์ถœํ•˜๋ ค๋Š” ๊ฐ’์„ ref์— ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
const inputRef = useRef(null);

useImperativeHandle(ref, () => {
return {
focus() {
inputRef.current.focus();
},
scrollIntoView() {
inputRef.current.scrollIntoView();
},
};
}, []);

return <input {...props} ref={inputRef} />;
});

์ผ๋ถ€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ MyInput์˜ ref๋ฅผ ๋ฐ›์œผ๋ฉด DOM ๋…ธ๋“œ ๋Œ€์‹  { focus, scrollIntoView } ๊ฐ์ฒด๋งŒ ๋ฐ›์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋…ธ์ถœํ•˜๋Š” DOM ๋…ธ๋“œ์˜ ์ •๋ณด๋ฅผ ์ตœ์†Œํ•œ์œผ๋กœ ์ œํ•œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import { useRef } from 'react';
import MyInput from './MyInput.js';

export default function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
    // This won't work because the DOM node isn't exposed:
    // ref.current.style.opacity = 0.5;
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}

๋ช…๋ นํ˜• ํ•ธ๋“ค ์‚ฌ์šฉ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”.

์ฃผ์˜ํ•˜์„ธ์š”!

ref๋ฅผ ๊ณผ๋„ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”. ๋…ธ๋“œ๋กœ ์Šคํฌ๋กค ํ•˜๊ธฐ, ๋…ธ๋“œ์— ํฌ์ปค์Šคํ•˜๊ธฐ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ํŠธ๋ฆฌ๊ฑฐํ•˜๊ธฐ, ํ…์ŠคํŠธ ์„ ํƒํ•˜๊ธฐ ๋“ฑ prop๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์—†๋Š” ํ•„์ˆ˜์ ์ธ ๋™์ž‘์—๋งŒ ref๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

prop๋กœ ๋ฌด์–ธ๊ฐ€๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ref๋ฅผ ์‚ฌ์šฉํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Modal ์ปดํฌ๋„ŒํŠธ์—์„œ { open, close }์™€ ๊ฐ™์€ ๋ช…๋ นํ˜• ํ•ธ๋“ค์„ ๋…ธ์ถœํ•˜๋Š” ๋Œ€์‹  <Modal isOpen={isOpen} />๊ณผ ๊ฐ™์ด prop isOpen์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ์ข‹์Šต๋‹ˆ๋‹ค. Effects๋Š” props๋ฅผ ํ†ตํ•ด ๋ช…๋ นํ˜• ๋™์ž‘์„ ๋…ธ์ถœํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๋ฌธ์ œํ•ด๊ฒฐ

์ปดํฌ๋„ŒํŠธ๊ฐ€ forwardRef๋กœ ๊ฐ์‹ธ์ ธ ์žˆ์ง€๋งŒ, ์ปดํฌ๋„ŒํŠธ์˜ ref๋Š” ํ•ญ์ƒ null์ž…๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ref๋ฅผ ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์žŠ์–ด๋ฒ„๋ ธ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ์ด ์ปดํฌ๋„ŒํŠธ๋Š” ref๋กœ ์•„๋ฌด๊ฒƒ๋„ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

const MyInput = forwardRef(function MyInput({ label }, ref) {
return (
<label>
{label}
<input />
</label>
);
});

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ref๋ฅผ DOM ๋…ธ๋“œ๋‚˜ ref๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•˜์„ธ์š”.

const MyInput = forwardRef(function MyInput({ label }, ref) {
return (
<label>
{label}
<input ref={ref} />
</label>
);
});

์ผ๋ถ€ ๋กœ์ง์ด ์กฐ๊ฑด๋ถ€์ธ ๊ฒฝ์šฐ MyInput์˜ ref๊ฐ€ null์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
return (
<label>
{label}
{showInput && <input ref={ref} />}
</label>
);
});

showInput์ด false์ด๋ฉด ref๊ฐ€ ์–ด๋–ค ๋…ธ๋“œ๋กœ๋„ ์ „๋‹ฌ๋˜์ง€ ์•Š์œผ๋ฉฐ MyInput์˜ ref๋Š” ๋น„์–ด ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด ์˜ˆ์ œ์˜ Panel๊ณผ ๊ฐ™์ด ์กฐ๊ฑด์ด ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ์ˆจ๊ฒจ์ ธ ์žˆ๋Š” ๊ฒฝ์šฐ ํŠนํžˆ ์ด ์ ์„ ๋†“์น˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค.

const MyInput = forwardRef(function MyInput({ label, showInput }, ref) {
return (
<label>
{label}
<Panel isExpanded={showInput}>
<input ref={ref} />
</Panel>
</label>
);
});