에러 - input Styled Component여러 개에 Ref 전달 해주기

// styled component
export const LoginForwardRefInput = forwardRef(({ type, placeholder, name }, ref) => {
  return (
    <LoginInput
      type={type}
      name={name}
      placeholder={placeholder}
      required
      ref={(props) => (ref.current[name] = props)}
    />
  );
});

Styled Component폴더에서 export 해서 하는 상황

아래 코드는 현재 쓰고 싶은 ref 요소들

// login.jsx

<div>
  <St.Ir>아이디(이메일) </St.Ir>
  <St.LoginForwardRefInput
    type="email"
    name="email"
    placeholder="아이디(이메일)"
    ref={signFormRef}
    required
  />
  </div>
<div>
  <St.Ir>패스워드</St.Ir>
  <St.LoginForwardRefInput
    type="password"
    name="password"
    placeholder="패스워드"
    ref={signFormRef}
    required
  />
  </div>
<div>
  <St.Ir>패스워드 확인</St.Ir>
  <St.LoginForwardRefInput
  type="password"
  name="passwordCheck"
  placeholder="패스워드 확인"
  ref={signFormRef}
  required
  />
  </div>

그런데 여기서 useRef 사용시 current에 넣어야 하는데...

저번 개인프로젝트 때

current 에 넣지 않고 다른 key값을 형성해 넣어 사용 했던 기억이 떠올랐다.

그리하여

export const LoginForwardRefInput = forwardRef(({ type, placeholder, name }, ref) => {
  return <LoginInput 
          type={type} 
          name={name} 
          placeholder={placeholder} 
          required 
          ref={(props) => (ref[name] = props)} />;
		});

이 식으로 하니까 ref 의 key && value 값을 잘 가져온다.