React에서 동적으로 생성되는 양식(Form)을 구현하기 위해서는 React.forwardRef()를 사용할 수 있습니다. React.forwardRef() 메소드는 부모로부터 전달된 ref를 자식 컴포넌트에 전달할 때 유용하게 사용됩니다.

1. 동적 양식 컴포넌트 생성하기

먼저, 동적으로 생성될 양식 컴포넌트를 생성해보겠습니다. 다음은 간단한 TextField 컴포넌트의 예입니다.

import React from 'react';

const TextField = React.forwardRef((props, ref) => {
  return (
    <input ref={ref} type="text" {...props} />
  );
});

export default TextField;

위의 코드에서 React.forwardRef()를 사용하여 TextField 컴포넌트를 생성하였습니다. 이 컴포넌트는 input 요소를 렌더링하며, 전달된 ref를 input에 연결하여 부모 컴포넌트에서 생성된 ref가 input 요소에 접근할 수 있도록 합니다.

2. 동적 양식 컴포넌트 사용하기

이제, 동적으로 생성된 양식 컴포넌트를 부모 컴포넌트에서 사용해보겠습니다. 다음은 TextField 컴포넌트를 사용하여 동적 입력 필드를 생성하는 예입니다.

import React, { useRef } from 'react';
import TextField from './TextField';

const DynamicForm = () => {
  const inputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    // inputRef를 사용하여 입력값에 접근하거나 처리합니다.
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default DynamicForm;

위의 코드에서 DynamicForm 컴포넌트 내부에서는 TextField 컴포넌트를 사용하여 동적으로 생성된 입력 필드를 만들고 있습니다. useRef() 훅을 사용하여 inputRef를 생성하고, 이를 TextField 컴포넌트의 ref 속성으로 전달합니다. 그리고 handleSubmit 함수에서 inputRef.current.value를 사용하여 입력값에 접근하거나 처리할 수 있습니다.

결론

React.forwardRef()를 사용하여 동적으로 생성되는 양식 컴포넌트를 구현하는 방법에 대해 알아보았습니다. 이를 활용하여 유연하고 재사용 가능한 양식 컴포넌트를 만들고, 부모 컴포넌트에서 생성된 ref를 활용하여 컴포넌트 내부의 요소에 접근할 수 있습니다.

#react #javascript