[R09M App] CreateRoom 페이지 - forwardRef 이슈

[jellyjoji]

내용

Status.jsx 컴포넌트를 forwardRef 를 사용하고 CreateRoom.jsx 페이지로 불러와서 ref={statusRef} 를 적용시켜 form data 로 입력하는 과정에서 오류가 발생하고 있습니다. selection > option 에 담긴 대기중/진행중/공구종료 상태들을 컴포넌트화하여 forwardRef 를 주어 참조시키고 form 데이터로 입력하는 과정에서의 form으로 불러들이지 못하는 에러를 어떻게 해결하면 될까요 ?

참고 이미지 (선택)

※ 댓글에 이슈 해결 완료 후 결과 또는 해결 과정 이미지 첨부

[jellyjoji]

셀렉트 메뉴의 값은 value로 가져오세요.

Status 컴포넌트 내부의<select> 요소는<optoin>항목의 value 값을 제공합니다. 이 값은 상위 컴포넌트인 CreateRoom 컴포넌트에서 statusRef 참조 객체를 통해 current.value로 접근이 가능합니다.

const statusValue = statusRef.current.value;
console.log(statusValue);

import { useState, useId, forwardRef } from 'react';

function Status({ title, className, labelClassName }, ref) {
  const id = useId();

  return (
    <>
      <label htmlFor={id} labelClassName={labelClassName}>{title}</label>
      <select ref={ref} id={id} className={className} name="status">
        <option value="대기중" selected>대기중</option>
        <option value="진행중">진행중</option>
        <option value="공구종료">공구종료</option>
      </select>
    </>)
}
export default forwardRef(Status);

이를 통해 하위 컴포넌트에서 선택된 값을 가져올 수 있고 PocketHost 데이터베이스에 저장할 수 있습니다. 😃