😢문제점...😢

✔ 처음 SignUp.jsx의 data가 안들어옴. (빈배열)
✔ submit 버튼을 눌렀을 때, value가 초기화가 안됨.(setState(''))

오류해결하기

1.배열에 OBJ안들어옴

Array.concat 사용 (= spread operator와같음)

export default function App() {
  const [userData, setUserData] = useState([]);

  const addData = (data) => {
    setUserData(userData.concat({ ...data, key: data.name }));
    console.log(userData);
  };
  return (
    <div className="container">
      <SignUp onUpdate={addData} />
    </div>
  );
}

오류해결 => 값 잘들어와있음.

export default function App() {
  const [userData, setUserData] = useState([]);
  const addData = (data) => {
   setUserData(userData.concat({ ...data, key: data.name }));
   console.log(userData) // []
  };
  console.log(userData); // (1) [Object]
  return (
    <div className="container">
      <SignUp onUpdate={addData} />
    </div>
  );
}

내가 바보였음 ㅎ

2. input value 값 초기화

✔ useInput 고치기

state object로 만들기

//기존 state
  const [id, onChangeId] = useInput("");
  const [age, onChangeAge] = useInput("");
  const [gender, onChangeGender] = useInput("");
  const [phone, onChangePhone] = useInput("");
  const [email, onChangeEmail] = useInput("");
  const [address, onChangeAddress] = useInput("");
//새로운 object 형태의 state
  const [data] = useInput({
    userId: "",
    age: "",
    gender: "",
    phone: "",
    email: "",
    address: ""
  });

useInput 코드 고치기

//기존 useInput function
  const useInput = (initialValue) => {
    const [value, setValue] = useState(initialValue);
    const handler = (event) => {
      setValue(event.target.value);
    };
    return [value, handler];
  };

✨ 1개의 input 기준으로 이루어진 function.

• onChange 함수로 value를 event.target.value로 state바꿈

//새로운 useInput function
  const useInput = (initialValues) => {
    const [values, setValues] = useState(initialValues);
    const onChange = (event) => {
      const { name, value } = event.target;
      setValues({ ...values, [name]: value });
    };
    const onReset = () => setValues(initialValues);
    return [values, onChange, onReset];
  };

✨ 여러개의 input value를 받아 해결하는 function

• initialValues = {userId:'',age:''...} 형식 오브젝트
• onChange 함수 : event 인자로 받음.
  <input name="userId" value={userId} onChange={onChange} />
  [name]= event.target === [userId,age,gender...]=event.target
  setValues를 사용해 기존 values spread operator로 복사해, 값 변경
• onReset 함수 : 기존 initialValues(userId:'',age:'' ... )로 setState.
  (= 빈값)
• values(값이 들어간 오브젝트 state), onChange,onReset 함수 반환

App.js

export default function App() {
  const [userData, setUserData] = useState([]);
  const handleUpdate = (data) => {
   setUserData([...userData,{...data,key:data.userId}]);
  };
  console.log(userData)
  return (
    <div className="container">
      <SignUp onUpdate={handleUpdate} />
    </div>
  );
}

🎉이렇게 값이 잘 들어가있음^___^❤🧡💛💚💙💜🤎🎉

내일은 유효성 검사 할꺼임

출처/참고 : https://react.vlpt.us/basic/18-useCallback.html [벨로포터 hook 커스텀]