forwardRef

• 검색어를 입력하면 해당 입력된 키워드로 자동완성을 하고, 자동완성된 데이터를 클릭하면 input 요소의 value에 빈 값을 넣어주기 위해 useRef를 사용하려고 했습니다.

• 하지만 아무리 console.log(inputRef.current)를 찍어봐도 null값만 나왔고 이를 해결하기 위해 구글링을 하던 도중 forwardRef에 대해서 알게되었습니다.

• forwardRef는 부모 컴포넌트에서 자식 컴포넌트의 요소를 조작하기 위해서 사용됩니다.

const Parent = () => {
	const inputRef = useRef<HTMLInputElement>(null);
	
	const handleChangeInput = () => {
		console.log(inputRef.current) // null
	}

	return (
		<>
			<Input ref={inputRef} onChange={handleChangeInput}/>
		</>
	)
}

interface Props {
  ref?: React.Ref<HTMLInputElement>;
	onChange?: ChangeEventHandler;
}

const Input = ({ onChange, ref }) => {
    return (
      <S.Wrapper>
        <S.Input
          onChange={onChange}
          ref={ref}
        />
      </S.Wrapper>
    );
  },
);

• forwardRef를 사용하기 위해서는 자식 컴포넌트를 forwardRef로 감싸줘야 합니다.

• 주의! ref는 중괄호 밖에 적어야 합니다.(에러 찾는데 1시간 소요..)

interface Props {
  ref?: React.Ref<HTMLInputElement>;
	onChange?: ChangeEventHandler;
}

const Input = React.forwardRef<HTMLInputElement, Props>(
  ({ onChange }, ref) => {
    return (
      <S.Wrapper>
        <S.Input
          onChange={onChange}
          ref={ref}
        />
      </S.Wrapper>
    );
  },
);

export default Input;

• 추가로 부모 컴포넌트에서 useRef를 다음과 같이 정의하고 자식 컴포넌트를 조작하기 위해서 사용하면 다음과 같은 에러가 발생합니다.

	const inputRef = useRef<HTMLInputElement>(null);

	const resetInput = () => {
    inputRef.current.value = '';
  };

• 뒤에 느낌표를 붙여 해당 값이 무조건 할당되어 있다고 알려주면 해결됩니다.

	const inputRef = useRef<HTMLInputElement>(null);

	const resetInput = () => {
    inputRef.current!.value = '';
  };

• 참고
• forwardRef 사용
• useRef Object is possibly null