[Error] Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for..

input 컴포넌트에 입력하려고 하면 이런 에러가 뜬다

 

 

직번하면 이러하다 

 

경고: 구성 요소가 제어되지 않는 입력을 제어하도록 변경하는 중입니다.

이 문제는 값이 정의되지 않은 값에서 정의된 값으로 변경되기 때문에 발생할 수 있으며, 이는 발생해서는 안 됩니다.

구성 요소의 수명 동안 제어된 입력 요소를 사용할지 또는 제어되지 않은 입력 요소를 사용할지 결정합니다

 

---

input을 훅으로 사용할 때는 이런 식으로 초기값을 주면 에러가 해결된다 

 

import { useCallback } from "react";
import { useState } from "react";
const useInput = () => {
  const [value, setvalue] = useState();
  const onChange = useCallback((e) => {
    setvalue(e.target.value);
  }, []);

  return [value, onChange, setvalue];
};

export default useInput;

value 초기값에 빈 배열을 주면 된다

  const [value, setvalue] = useState("");