TIL-24.05.02

 

 

문제점

어떤 컴포넌트에서 다른 컴포넌트 내부에 있는 HTML엘리먼트에 직접 접근해야하는 방법이 필요했다.

Form컴포넌트 내부에 재사용을 위해 따로 만들어논 Input컴포넌트가 들어가 있고, Form컴포넌트에서 Input컴포넌트 내부 <input>의 value값을 가져와야하는 문제..

이런 상황을 그동안 겪어본적이 없었는지 너무나 당연스럽게 Form컴포넌트에서 useRef훅을 사용해 Input컴포넌트에 useRef좌표를 ref프로퍼티로 넘겨줬다. 그 다음 Input컴포넌트에서 props.ref를 받아쓰려고하니,,,, 

'ref' is not a prop

 

 

 

시도해본것

리액트에서 ref prop은 HTML 엘리먼트에 직접 접근하기 위해 사용된다는 정의.. 즉 input HTML 엘리먼트의 prop으로서 ref를 바로 줘야한다는것

근데 내 경우는 컴포넌트 속 input HTML 엘리먼트에 접근해야하는 경우다.

그래서 구글링해본 결과 찾아낸 것이 forwadRef

HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 리액트에서 제공하는 forwardRef()함수를 사용해야 한다.

import React, { forwardRef, useRef } from "react";

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

function Field() {
  const inputRef = useRef(null);

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={handleFocus}>입력란 포커스</button>
    </>
  );
}

Input컴포넌트에 forwardRef()함수를 적용시키면 별개로 ref를 사용할수 있고, 그걸 이용해 HTML엘리먼트의 prop으로 사용하면된다

 

 

 

 

알게된점

리액트에서 ref prop은 HTML 엘리먼트에 직접 접근하기 위해 사용된다는 정의!!

컴포넌트끼리 주고받는 그 prop으로서가 아니라 HTML요소의 속성으로만 사용된다는것