[react-hook-form] <input>에서 기존 값 받아서 보여주면서 수정도 가능하도록 : defaultValue

다음과 같이 urlDetails 에 정보를 저장한 상황일 때

const [urlDetails, setUrlDetails] = useState<IUrlDetailContent>();

  // * urlDetails
  useEffect(() => {
    filecompAPI
      .urlDetails(selectedUrlHash)
      .then((response) => {
        setUrlDetails(response.data);
      })
      .catch((error) => {
        console.error('Error fetching URL details: ', error);
      });
  }, [selectedUrlHash]);

export interface IUrlDetailContent {
  urlHash: string;
  url: string;
  rep: boolean;
  repUrl: string;
  repUrlHash: string;
  statusType: string;
  sourceType: string;
  entryType: string;
  extInfo: string;
  language: string;
}

 

defaultValue 에 넣어주면 input 에 값이 이미 채워진 채로 출력이 되고, 수정도 가능하다.

<div className='modal-body'>
	<h3>{t('text.language')}</h3>
	<input
		className='select'
		placeholder=' '
		type='text'
		style={{ width: '465px', height: '40px' }}
		maxLength={32}
		{...register('language')}
		defaultValue={urlDetails?.language || ''} // Set the defaultValue here
	/>
</div>

input 에 값이 이미 채워진 채로 보여지는 모습이다.