인프런 커뮤니티 질문&답변

안녕하십니까. 선생님께서 만드신 useInput Custom Hooks를 팀 프로젝트에서 사용하던 중에 질문이 있어 글을 올립니다.

const [name, onChangeName] = useInput('')의 형태로 useInput 선언을 해줬습니다. 이 name과 password는 form 안에 들어가있습니다. 여기서 저는 form을 제출했을 때 이 name과 password의 값을 없애고 싶습니다. 그러니까 setName(''), setPassword('')을 하고 싶다는 것입니다. 헌데 이미 onChange={onChangeName}으로 걸어버려 어떻게 해야할 지 모르겠습니다.

아래에 제가 사용하려고 한 코드 일부를 첨부합니다. 감사합니다.

import React, { useState } from 'react';
import useInput from "../../Hooks/useInput";

const AddMenu = () => {
  let pwd = '1234';
  const [disabled, setDisabled] = useState(false);
  const [name, onChangeName] = useInput("");
  const [password, onChangePassword] = useInput("");
  const onSubmitForm = async (e) => {
    setDisabled(true);
    e.preventDefault();
    await new Promise((r) => setTimeout(r, 1000));
    if (pwd === password) {
       alert("등록되었습니다");
      setDisabled(false);
      setShowPopupMenu(false);
      // 이 부분에 name과 password input 값을 초기화해주고 싶습니다.
    } else {
      alert("비밀번호가 일치하지 않습니다");
      setDisabled(false);
    }
  }
            <FormWrap onSubmit={onSubmitForm}>
              <Input type="text" onChange={onChangeName} placeholder="상품명" />
              <Input type="password" onChange={onChangePassword} placeholder="관리자 비밀번호" />
           </FormWrap>
} 

const Input = styled.input`
  width: 183px;
  height: 32px;
  margin-bottom: 5px;
  background-color: #dedef7;
  box-shadow: inset 0px 3px 3px #aaa;
`;

const FormWrap = styled.form`
  margin-top: 15px;
  text-align: center;
`;

useInput.js입니다.

import { useCallback, useState } from "react";

const useInput = (initialData) => {
  const [value, setValue] = useState(initialData);
  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);
  return [value, handler, setValue];
};

export default useInput;